rver.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?http://0.0.0.0:8080',
'webpack/hot/only-dev-server'
);
}
});
config.plugins.push(
new webpack.HotModuleReplacementPlugin()
);
module.exports = config;
- 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 来发布。