最近公司给公司里架设了私有的npm仓库，相应地也需要一个用来发布react组件用的脚手架，在这个过程中又又又又复习了一下webpack，在这里分享下脚手架搭建的过程。
首先，我们预期的脚手架具有如下功能
开发组件时可以实时预览
对组件各种资源进行打包(js/css/图片等)
一键打包发布
1.创建项目
脚手架的名字暂时取react-simple-component-boilerplate。
首先创建一个新目录用于放我们的文件:
mkdir react-simple-component-boilerplate cd react-simple-component-boilerplate
使用npm命令创建一个项目
npm init
接下来会提示你输入项目的名称、版本号、作者等，也可以一路回车，稍后修改。
这一步完成后，你的项目文件夹里应该有一个package.json文件了，这个文件保存了我们项目和组件的各种信息。
接下来创建如下的目录结构
react-simple-component-boilerplate |-- config // webpack配置 |-- demo // 开发时预览用 |-- dist // 打包结果 |-- src // 源文件目录 | -- assets // 存放图片等媒体文件 | -- style // 存放样式，项目使用的是less来编写样式
2.安装依赖
既然我们要发布的是react组件，那依赖里肯定少不了react。
使用npm install安装下面的依赖
npm install react react-dom --save
打包工具选择的是webpack，下面是开发依赖，也需要一并安装
"devDependencies": { // babel用于将你写的es6+的代码转换到es5 "@babel/cli": "^7.0.0", "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", // 用于支持class属性 "@babel/plugin-proposal-decorators": "^7.0.0", // 支持decorator "@babel/plugin-transform-modules-commonjs": "^7.0.0", "@babel/plugin-transform-runtime": "^7.0.0", // 自动polyfill es5不支持的api特性 "@babel/preset-env": "^7.0.0", // 根据目标环境来按需转码 "@babel/preset-react": "^7.0.0", // 让babel支持react语法 "babel-loader": "^8.0.0", "css-loader": "^1.0.0", "file-loader": "^2.0.0", "html-loader": "^0.4.4", "less-loader": "^4.1.0", // 使用less来编写样式 "mini-css-extract-plugin": "^0.5.0", // 将css提取成一个单独的文件 "style-loader": "^0.23.0", "webpack": "^4.26.0", "webpack-cli": "^3.1.2", // webpack4之后需要额外安装webpack-cli "webpack-dev-server": "^3.1.14", // 开发时预览组件所用的服务，在文件变化时会自动刷新页面 "webpack-merge": "^4.1.4" // 用于合并webpack配置 },
3.编写组件
在/src目录下新建一个index.js，这就是我们组件的入口文件了。
如果项目中要使用图片、css等，分类放到assets、style文件夹下就好。
下面我们就在index.js中写一个简单的组件
/* src/index.js */ import React from 'react'; import './style/style.less'; // 使用less的情况 import testPng from './assets/test.png'; // 使用图片的情况 export default class MyComponent extends Component { render(){ return (<div>A new Component</div>) } }
接下来，我们在/demo目录下新建index.html和demo.js这两个文件用于在开发组件时预览组件效果。
index.html内容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div></div> <script src="https://www.jb51.net/demo.bundle.js"></script> </body> </html>
在demo.js中，我们要使用一下刚刚写的组件(位于/src/index.js)看一下效果，开发中这个demo.js文件会被打包成demo.bundle.js，就是在上面index.html中引用的js。
import React from 'react'; import ReactDom from 'react-dom'; import MyComponent from '../src/index' const Demo = () => { return <div> <h1>组件预览：</h1> <MyComponent /> </div> } ReactDom.render(<Demo />, document.getElementById('root'));
4.配置webpack和babel
4.1 配置webpack
在/config下我们建立三个webpack配置文件
webpack.base.js
webpack.config.dev.js // 开发时的配置
webpack.config.prod.js // 打包发布时的配置
由于开发和发布打包时webpack的配置有一部分是公共而且重复的，我们把这部分的配置单独拿出来放到webpack.base.js中。
首先是公共配置webpack.base.js:
module.exports = { module: { rules: [ { // 在webpack中使用babel需要babel-loader test: /\.js?$/, loader: 'babel-loader', exclude: '/node_modules/', }, { // 用于加载组件或者css中使用的图片 test: /\.(jpg|jpeg|png|gif|cur|ico|svg)$/, use: [{ loader: 'file-loader', options: { name: "images/[name][hash:8].[ext]" } }] } ] } }
下面是开发时所用的webpack配置，写在webpack.config.dev.js中