webpack4配置react开发环境
webpack4大大提高了开发效率,简化了配置复杂度,作为一个大的版本更新,作为一个对开发效率执着的爱折腾的程序员,已经忍不住要尝尝鲜了
首先是cli和webpack的分离,开发webpack应用程序需要安装一些开发依赖
webpack
webpack-cli
webpack-dev-server
babel-loader, babel-core, babel-preset-env, babel-preset-react
css-loader less-loader style-loader less ( 如果是sass的话安装 sass-loader和node-sass )
file-loader
yarn add webpack webpack-cli webpack-dev-server less less-loader style-loader css-loader babel-loader babel-core babel-preset-react babel-preset-env file-loader --save --dev
安装好之后开始配置webpack
mode
4.0版本添加了一个mode参数
development 或者 production,直接设置这两个参数,可以省去配置一些插件,但是也可以设置为 none,插件也可以自己手动配置
如果是development的话,相当于旧版本的
plugins: [ new webpack.NamedModulesPlugin(), new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("development") }), ]
如果是production 的话,相当于旧版本的
plugins: [ new UglifyJsPlugin(/* ... */), new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("production") }), new webpack.optimize.ModuleConcatenationPlugin(), new webpack.NoEmitOnErrorsPlugin() ]
入口和出口
旧版本中需要配置入口文件和出口文件,新版本如果不执行入口和出口,那么默认的配置就会和下边一样
module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'main.js' } }
零配置
因为很多都有默认值了,所以我们可以实现零配置
以上我们可以认为通过如下命令来实现
webpack --mode=development
loader
略有些复杂的loader配置可能会比较麻烦,如果用命令行实现也可以,但会执行一条很长的命令
注意loader的顺序是不能乱的,比如css 需要先通过 css-loader 然后 style-loader写到页面内, 也就是说在 use 里是反着写的
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.(js|jsx)$/, use: ['babel-loader'] }, { test: /\.(png|jpg|jpeg|gif)$/, use: ['file-loader'] } ] }
devServer
webpack-dev-server 可以快速让网站运行在一个 express 作为后台的虚拟服务器上,这样也可以实现很多开发的便利,比如热更新,浏览器实时刷新
主要参数