搭建 webpack + React 开发环境

说在开头

  • 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置。大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考。

正文开始

  • 我就假装大家都是装了node的情况下。
  • 进入项目目录,运行npm init按照步骤填写最终生成package.json文件,所有使用 npm 做依赖管理的项目,根目录下都会有一个这个文件,该文件描述了项目的基本信息以及一些第三方依赖项(插件)。详细的使用说明可查阅[官网文档],不过是英文的。

  • 已知我们将使用 webpack 作为构建工具,那么就需要安装相应插件,运行 npm install webpack webpack-dev-server --save-dev 来安装两个插件。
    又已知我们将使用 React ,也需要安装相应插件,运行 npm i react react-dom --save来安装两个插件。其中iinstall的简写形式。安装完成之后,查看package.json可看到多了devDependenciesdependencies两项,根目录也多了一个node_modules文件夹。

  • --save--save-dev 的区别
    npm i时使用--save--save-dev,可分别将依赖(插件)记录到package.json中的dependenciesdevDependencies下面。
    dependencies下记录的是项目在运行时必须依赖的插件,常见的例如react jquery等,即使项目打包好了、上线了,这些也是需要用的,否则程序无法正常执行。
    devDependencies下记录的是项目在开发过程中使用的插件,例如这里我们开发过程中需要使用webpack打包,但是一旦项目打包发布、上线了之后,webpack就都没有用了,可卸磨杀驴。
    延伸一下,我们的项目有package.json,其他我们用的项目如webpack也有package.json,见./node_modules/webpack/package.json,其中也有devDependenciesdependencies。当我们使用npm i webpack时,./node_modules/webpack/package.json中的dependencies会被 npm 安装上,而devDependencies也没必要安装。

  • webpack.config.js
    为了提高学习效率,webpack 最最基础的用法,就不再挨个演示了(推荐一个非常好的[入门文章],以及[更多资料])这里我们把项目中的webpack.config.js这个配置文件详细的讲解一下,过程中也会照顾 0 基础的同学。
    webpack.config.js 就是一个普通的 js 文件,符合 commonJS 规范。最后输出一个对象,即module.exports = {...}
    这个比较基础,不过需要新建./app/index.js作为入口文件,目前项目中只有这一个入口文件。不过 webpack 支持多个入口文件,可查阅文档。
    输出就是一个bundle.js,js 和 css 都在里面,不过只有在开发环境下才用,发布代码的时候,肯定不能只有这么一个文件,接下来会讲到。

  • module
    针对不同类型的文件,使用不同的loader,当然使用之前要安装,例如npm i style-loader css-loader --save-dev。该项目代码中,我们用到的文件格式有:js/jsx 代码、css/less 代码、图片、字体文件。
    less 是 css 的语法糖,可以更高效低冗余的写 css,不熟悉的朋友可去[官网]看看,非常简单。
    在加载 css/less 时用到了postcss,主要使用autoprefixer功能,帮助自动加 css3 的浏览器前缀,非常好用。
    编译 es6 和 jsx 语法时,用到家喻户晓的babel,另外还需增加一个.babelrc的配置文件。

  • plugins
    使用 html 模板(需要npm i html-webpack-plugin --save-dev),这样可以将输出的文件名(如./bundle.js)自动注入到 html 中,不用我们自己手写。手写的话,一旦修改就需要改两个地方。
    使用热加载和自动打开浏览器插件

  • devServer
    对 webpack-dev-server 的配置

  • npm start
    在 package.json 中,输入以下代码,将这一串命令封装为npm start,这样就可以运行项目代码了。

    1
    2
    3
    "scripts": {
    "start": "NODE_ENV=dev webpack-dev-server --progress --colors"
    }

代码中NODE_ENV=dev代表当前是开发环境下,这里的"dev"可被 js 代码中的process.env.NODE_ENV得到并做一些其他处理。

  • 定义环境全局变量
    以下定义,可使得代码通过__DEV__得到当前是不是开发模式。
1
2
3
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})

打开./app/util/localStore.js可以看到if (__DEV__) { console.error('localStorage.getItem报错, ', ex.message) },即只有开发环境下才提示error,发布之后就不会提示了。(因为发布的命令中用到NODE_ENV=production

  • 生产环境的配置 webpack.production.config.js
    开发环境下,可以不用考虑系统的性能,更多考虑的是如何增加开发效率。而发布系统时,就需要考虑发布之后的系统的性能,包括加载速度、缓存等。下面介绍发布用配置代码和开发用的不一样的地方。
    发布到 ./build 文件夹中 : path: __dirname + "/build",

  • vendor
    将第三方依赖单独打包。即将 node_modules 文件夹中的代码打包为 vendor.js 将我们自己写的业务代码打包为 app.js。这样有助于缓存,因为在项目维护过程中,第三方依赖不经常变化,而业务代码会经常变化。
    md5后缀

  • md5后缀
    为每个打包出来的文件都加md5后缀,例如"/js/[name].[chunkhash:8].js",可使文件强缓存。

  • 压缩代码
    使用 Uglify 压缩代码,其中warnings: false是去掉代码中的 warning

  • 分离 css 和 js 文件
    开发环境下,css 代码是放在整个打包出来的那个 bundle.js 文件中的,发布环境下当然不能混淆在一起,使用new ExtractTextPlugin('/css/[name].[chunkhash:8].css'),将 css 代码分离出来。

  • npm run build
    打开package.json,查看以下代码。npm startnpm run build分别是运行代码和打包项目。另外,"start"、"test"可以不用run

这两个命令主要有以下区别:

  • 前者中默认使用 webpack.config.js 作为配置文件,而后者中强制使用 webpack.production.config.js 作为配置文件
  • 前者NODE_ENV=dev而后者NODE_ENV=production,标识不同的环境。而这个"dev" "production"可以在代码中通过process.env.NODE_ENV获取。

最小化压缩 React

以下配置可以告诉 React 当前是生产环境,请最小化压缩 js ,即把开发环境中的一些提示、警告、判断通通去掉,直流以下发布之后可用的代码。

1
2
3
4
5
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),

接下来把开发代环境的配置和生产环境的配置贴上

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'app/index.js'),
output: {
filename: "bundle.js"
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
{ test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less' },
{ test: /\.css$/, exclude: /node_modules/, loader: 'style!css!postcss' },
{ test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' }, // 限制大小5kb
{ test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
]
},
postcss: [
require('autoprefixer') //调用autoprefixer插件,例如 display: flex
],
plugins: [
// html 模板插件
new HtmlWebpackPlugin({
template: __dirname + '/app/index.html'
}),
// 热加载
new webpack.HotModuleReplacementPlugin(),
// 打开浏览器
new OpenBrowserPlugin({
url: 'http://localhost:8080'
}),
// 可在业务js代码中使用 __DEV__ 判断是否是开发环境 (dev模式下可以提示错误、测试报告等, production模式不提示)
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false')),
})
],
devServer: {
proxy: {
// 凡是 `/api` 开头的 http 请求,都会被代理到 localhost:3000 上,由 koa 提供 mock 数据。
// koa 代码在 ./mock 目录中,启动命令为 npm run mock
'/api': {
target: 'http://localhost:3000',
secure: false
}
},
colors: true, // 终端舒服为彩色
historyApiFallback: true, //不跳转,在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
inline: true, // 实时刷新
hot: true, // 使用热加载插件 HotModuleReplacementPlugin
}
}

webpack.production.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
var pkg = require('./package.json')
var path = require('path')
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: path.resolve(__dirname, 'app/index.js'),
// 将 第三方依赖(node_modules中的) 单独打包
vendor: Object.keys(pkg.dependencies)
},
output: {
path: __dirname + "/build",
filename: "/js/[name].[chunkhash:8].js"
},
resolve:{
extensions:['', '.js','.jsx']
},
module: {
loaders: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
{ test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss!less') },
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss') },
{ test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000&name=img/[name].[chunkhash:8].[ext]' },
{ test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000&name=fonts/[name].[chunkhash:8].[ext]'}
]
},
postcss: [
require('autoprefixer')
],
plugins: [
// webpack 内置的 banner-plugin
new webpack.BannerPlugin("Copyright by Nick930826@github.com."),
// html 模板插件
new HtmlWebpackPlugin({
template: __dirname + '/app/index.html'
}),
// 定义为生产环境,编译 React 时压缩到最小
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
// 为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
}
}),
// 分离CSS和JS文件
new ExtractTextPlugin('/css/[name].[chunkhash:8].css'),
// 提供公共代码
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '/js/[name].[chunkhash:8].js'
}),
// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式(dev模式下可以提示错误、测试报告等, production模式不提示)
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})
]
}