解决 webpack.dev.js webpack.prod.js 存在大量重复代码 在项目根目录下创建一个 webpack.common.js 文件 把公共代码提取出来

安装

npm i webpack-merge -D

webpack.common.js

const path require( path const HtmlWebpackPlugin require( html-webpack-plugin const CleanWebpackPlugin require( clean-webpack-plugin const webpack require( webpack module.exports { entry: { main: ./src/index.js  module: { rules: [{  test: /\\.js$/,  exclude: /node_modules/,  loader: babel-loader , }, { test: /\\.(jpg|png|gif)$/, use: { loader: url-loader , options: { name: [name]_[hash].[ext] , outputPath: images/ , limit: 10240 }, { test: /\\.(eot|ttf|svg)$/, use: { loader: file-loader  }, { test: /\\.scss$/, use: [ style-loader ,  loader: css-loader , options: { importLoaders: 2 postcss-loader , sass-loader , }, { test: /\\.css$/, use: [ style-loader , css-loader , postcss-loader  plugins: [ new HtmlWebpackPlugin({ template: src/index.html  }),  new CleanWebpackPlugin([ dist ],{ root:path.resolve(__dirname, ../ ) output: { filename: [name].js , path: path.resolve(__dirname, ../dist )}

webpack.dev.js

const webpack require( webpack const merge require( webpack-merge )const commenConfig require( ./webpack.commin.js )const devConfig { mode: development , devtool: cheap-module-eval-source-map , devServer: { contentBase: ./dist , open: true, port: 8080, hot: true, hotOnly: true plugins: [  new webpack.HotModuleReplacementPlugin() optimization: { usedExports: true//将开发配置和公共配置做结合module.exports merge(commenConfig, devConfig)

webpack.prod.js

const merge require( webpack-merge )const commenConfig require( ./webpack.commin.js )const prodConfig { mode: production , devtool: cheap-module-source-map ,//将线上配置和公共配置做结合module.exports merge(commenConfig, prodConfig)

最后在根目录下创建一个build文件夹 将 webpack.common.js webpack.dev.js webpack.prod.js 放在build文件夹下,统一管理。

在 package.json 中

{ scripts : { dev : webpack-dev-server --config ./build/webpack.dev.js , build : webpack --config ./build/webpack.prod.js }

详细请看官网文档 guides/production