const webpack = require('webpack'); // 读取同一目录下的 base config const config = require('./webpack.base.config'); // 添加 webpack-dev-server 相关的配置项 config.devServer = { contentBase: './', publicPath: '/assets/' }; // 有关 Webpack 的 API 本地代理，另请参考 https://webpack.github.io/docs/webpack-dev-server.html#proxy config.module.rules.push( { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ], exclude: /node_modules/ } ); // 真实场景中，React、jQuery 等优先走全站的 CDN，所以要放在 externals 中 config.externals = { react: 'React', 'react-dom': 'ReactDOM' }; // 添加 Sourcemap 支持 config.plugins.push( new webpack.SourceMapDevToolPlugin({ filename: '[file].map', exclude: ['vendor.js'] // vendor 通常不需要 sourcemap }) ); // Hot module replacement Object.keys(config.entry).forEach((key) => { // 这里有一个私有的约定，如果 entry 是一个数组，则证明它需要被 hot module replace if (Array.isArray(config.entry[key])) { config.entry[key].unshift( 'webpack-dev-server/client?:8080', 'webpack/hot/only-dev-server' ); } }); config.plugins.push( new webpack.HotModuleReplacementPlugin() ); module.exports = config;
3. webpack.config.js
这是用于生产环境的 webpack 配置，同样继承自 base：
const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 读取同一目录下的 base config const config = require('./webpack.base.config'); config.module.rules.push( { test: /\.less$/, use: ExtractTextPlugin.extract( { use: [ 'css-loader', 'less-loader' ], fallback: 'style-loader' } ), exclude: /node_modules/ } ); config.plugins.push( // 官方文档推荐使用下面的插件确保 NODE_ENV new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production') }), // 启动 minify new webpack.LoaderOptionsPlugin({ minimize: true }), // 抽取 CSS 文件 new ExtractTextPlugin({ filename: '[name].css', allChunks: true, ignoreOrder: true }) ); module.exports = config;
现在在你的工程文件夹里应该已经有三个 Webpack 配置文件，它们分别是：
· webpack.base.config.js
· webpack.dev.config.js
· webpack.config.js
最后，你还需要在 package.json 里添加相应的配置：
{ ... "scripts": { "build": "webpack --optimize-minimize", "dev": "webpack-dev-server --config webpack.dev.config.js", "start": "npm run dev" // 或添加你自己的 start 逻辑 }, ... }
和很多项目一样，在开发环境下的时候，你需要使用 npm run dev 来启动，而在生产环境中，则用 npm run build 来发布。
题外话，在真实场景中，我们不会直接使用 webpack-dev-server，而采用 express + webpack/webpack-dev-middleware，配置方法与上面所述的完全相同。
关于专栏
如果你喜欢这篇文章，就请关注我的专栏《前端零栈》，在这里我们一起聊一聊前端技术和前端工程。
关于作者
Henry，10 岁开始学习计算机编程，高二暑假获得江苏省青少年信息奥林匹克一等奖。2000 年开始自学 JavaScript 及网页制作，2006 年起正式开始从事前端开发工作，从此一干就是 10 多年。加入阿里巴巴前，曾在 SAP 中国研究院担任智慧交通大数据产品经理。
Github：MagicCube (Henry Li)
小结
前端从开发到部署前都离不开 Webpack 的参与，本文结合了我们自己在开发中碰到的种种问题解决方案，同时借鉴了很多开源项目的配置来介绍一种用 3 个 JS 文件来配置 Webpack 的方法。关于本文如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: