接触前端还不到一年,之前公司有一个UI的工程由我来独立完成,犹豫了几秒后决定选用react,花几天时间看完了阮一峰老师的React 技术栈系列教程就开始动手了,其中在webpack的配置上花了很多时间,因此整理了一下当成一个学习笔记吧
webpack2大部分的配置还是和webpack1一样,官方文档中有一篇从1迁移到2的指南
一、安装webpack相关组件以及热加载模块
npm install -D webpack webpack-dev-middleware webpack-dev-server webpack-hot-middleware babel-preset-react-hmre
在webpack1的时候是使用的react-hot-loader,后来无意间发现了这篇文章The Death of React Hot Loader(只看懂了标题),果断弃用之,选用react-transform-hmr
二、配置实例
如下方的简单示例
const webpack = require('webpack');
module.exports = {
entry: {
app: 'entrance.js'
},
output: {
path: 'fvrd/dist',
filename: '[name].js',
},
module: {
rules:[{
test: /\.css$/,
use:['style-loader', 'css-loader']
}],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
],
};
- entry是页面入口文件配置,Webpack 会分析入口文件,解析包含依赖关系的各个文件,当入口文件不止一个时,可以将其配置为数组,output 是输出项配置,如例子中的输出为app.js
- module为加载器配置,例子中定义了.css文件的加载规则,会生成style标签放在head中。webpack1的时候use中的-loader后缀可以不写,webpack2必须要写
- plugins为插件配置,例子中定义了一个环境变量,在代码中console.log(process.env.NODE_ENV)将打印production
三、重要的插件
- DefinePlugin
注入环境变量,如在代码中需要开发和生产环境执行不一样的代码,可以使用此插件
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
//代码中
if(process.env.NODE_ENV==='production'){
//do something
}else{
//do something
}
- DllPlugin DllReferencePlugin
解决打包速度慢的大招。第三方库是不经常变动的,在一个配置文件中使用DllPlugin把第三方库或者自己写的公共组件打包在一起并生成一个json文件,在另外一个配置文件中使用DllReferencePlugin就不会重复打包第三方库了。缺点是至少需要两个webpack配置文件
//一个配置文件
entry: {
lib: ['react','react-dom','react-router','redux','...'],
}
new webpack.DllPlugin({
path: path.join(__dirname, 'fvrd/dist/manifest.json'),
name: '[name]',//在这个例子中将生成lib.js
context: __dirname,
})
//另一个配置文件
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./fvrd/dist/manifest.json'),
})
- ProvidePlugin
用来定义全局变量
//以后使用jquery无需再require('jquery')
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
})
- UglifyJsPlugin
压缩代码
new webpack.optimize.UglifyJsPlugin({
//压缩代码
output: {
comments: false, //不移除注释
},
compress: {
warnings: false//忽略警告,某些没有用到的组件在打包时会被移除,这时会产生警告,无需在意,webpack1默认true,webpack2默认false
},
})
- HtmlWebpackPlugin
非默认组件,需要一个默认的index.html,js和css会自动插入此模板,不过通过DllPlugin生成的公共包需要自己手动引入
//npm install html-webpack-plugin --save-dev
let HtmlWebpackPlugin = require('html-webpack-plugin');
//...
new HtmlWebpackPlugin({
favicon:'./src/images/icon_logo.png', //favicon路径
filename: '../index.html', //生成的html存放路径,相对于 path
template: './src/template/index.html', //html模板路径
inject: true,
hash: true,
minify: {
//压缩HTML文件
removeComments:true, //移除HTML中的注释
collapseWhitespace:true //删除空白符与换行符
}
})
- ExtractTextPlugin
主要用来将css文件分离开
//webpack2需要安装beta版
//npm install --save-dev extract-text-webpack-plugin@beta
let ExtractTextPlugin = require('extract-text-webpack-plugin