在开发环境下,咱们首先考虑的是方便开发,方便代码调试,不须要考虑代码合并和css样式分离这些。css
这里主要说三个 :1.css模块化;2.模块热替换功能;3.source-map(代码映射)node
// 开发环境打包配置 const path = require('path'); const webpack = require('webpack'); const base = require('./webpack.config.base') const dfPath = require('./path') // webpack配置合并工具 const merge =require('webpack-merge') const RS = (...arg)=>path.resolve( __dirname , ...arg ) // 合并方式配置 let strategyMerge = merge.strategy({ entry: 'prepend' }); let config = { entry: { app: path.resolve(dfPath.root,'src/app.js') }, output: { path: dfPath.dist, filename: '[name].bundle.js', publicPath: '/', chunkFilename: '[name].sepChunk.js' }, module:{ rules: [ { test: /\.js$/, use:['babel-loader'], exclude: [ dfPath.node_modules ] }, { test:/\.css$/, use:[ 'style-loader', { loader:'css-loader', options:{ // css模块化,方便多人开发 module:true, // 定义模块化css后的类名(默认为hash值,可读性差)path:路劲; name:文件名; local:本地定义的className localIdentName: '[path][name]__[local]--[hash:base64:5]' }, } ], // 排除的文件,遇到这些文件不会用当前 loader 处理,也就不会模块化 exclude:[ RS('./src/common'), RS('node_modules') ] }, { test:/\.css$/, use:['style-loader','css-loader'], include:[ RS('./src/common'), RS('node_modules') ] }, { test: /\.(png|jpg|jpeg|gif)$/, use: ['url-loader?limit=8192'], } ] }, plugins:[ // 模块热替换功能 new webpack.HotModuleReplacementPlugin() ], // 代码映射,方便报错时,找到对应的源代码 devtool: 'cheap-module-eval-source-map', devServer:{ // 服务器打包后,输出的资源路劲 publicPath:'/', open:true } }; // 导出合并后的webpack配置 module.exports = strategyMerge( base , config );
相比开发环境,生产环境打包是要最后发布到服务器部署的代码,咱们须要尽可能保持代码简洁,加载性能最优,不须要调试辅助工具。react
咱们从这几个方面优化 :1.公共模块拆分,单独打包;2. css文件分离,单独打包输出;3.代码压缩;webpack
// 生产环境配置 const webpack = require('webpack'); const base = require('./webpack.config.base') const path = require('path'); const dfPath = require('./path'); const merge = require('webpack-merge'); // 压缩工具 const ClosureCompilerPlugin = require('webpack-closure-compiler'); // css单独打包插件 const extractTextWebpackPlugin = require('extract-text-webpack-plugin'); const extractCSS = new extractTextWebpackPlugin('assets/css/[name]_[contenthash:6].css'); // weback合并配置 let strategyMerge = merge.strategy({ entry: 'replace', output: 'replace', module:{ rules: 'replace' } }); let config ={ entry: { // 公共模块拆分,这些代码会单独打包,通常咱们会把引用的框架文件拆分出来,方便浏览器缓存,节省资源。 vender:['react'], app: path.resolve(dfPath.root,'src/app.js') }, output: { path: dfPath.dist, filename: 'assets/js/[name]_[chunkhash].bundle.js', publicPath: '/', chunkFilename: 'assets/js/[name].sepChunk.js', hashDigestLength: 6 }, module:{ rules: [ { test: /\.js$/, use:['babel-loader'], exclude: [ dfPath.node_modules ] }, /* 开启 css单独打包 和 css模块化的配置 */ { test: /\.css$/, use: extractCSS.extract({ use: [ { loader: 'css-loader', options:{ modules: true } } ] }) }, { test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: 'url-loader', options:{ limit:8192, name: '[name]_[hash].[ext]', outputPath: 'assets/img/' } } ], }, { test: /\.(mp4|ogg|svg|ico)$/, use: [ { loader: 'file-loader', options:{ name: '[name]_[hash].[ext]', outputPath: 'assets/media/' } } ] }, { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'url-loader', options:{ limit:10000, name: '[name]_[hash].[ext]', outputPath: 'assets/font/', mimetype: 'application/font-woff' } } ] }, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'url-loader', options:{ limit:10000, name: '[name]_[hash].[ext]', outputPath: 'assets/font/', mimetype: 'application/octet-stream' } } ] }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'file-loader', options:{ name: '[name]_[hash].[ext]', outputPath: 'assets/font/', } } ] }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'url-loader', options:{ limit:10000, name: '[name]_[hash].[ext]', outputPath: 'assets/font/', mimetype: 'image/svg+xml' } } ] }, ] }, plugins:[ extractCSS, // 设置 process.env(生产环境) 环境变量的快捷方式。 new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }) ,new ClosureCompilerPlugin() ], devtool: 'source-map' }; module.exports = strategyMerge(base,config);