webpack----7生产环境构建 配置文件

Posted sophia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack----7生产环境构建 配置文件相关的知识,希望对你有一定的参考价值。

npm install --save-dev webpack-merge

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。
webpack.common.js
const path = require(\'path\');
// const CleanWebpackPlugin = require(\'clean-webpack-plugin\');
const {CleanWebpackPlugin} = require(\'clean-webpack-plugin\');//加{}否则会报错
const htmlWebpackPlugin = require(\'html-webpack-plugin\');


module.exports = {
  entry: {
    app: \'./src/index.js\'
  },
  plugins: [
    new CleanWebpackPlugin(),  //([\'dist\'])官网里面加这个会报错了去掉了
    new HtmlWebpackPlugin({
      title: \'Production\'
    })
  ],
  output: {
    filename: \'[name].bundle.js\',
    path: path.resolve(__dirname, \'dist\')
  }
};



/**  知识补充
 * https://www.cnblogs.com/cench/p/5800157.html
 * 
*/

webpack.dev.js
const merge = require(\'webpack-merge\');
const common = require(\'./webpack.common.js\');

module.exports = merge(common, {
 devtool: \'inline-source-map\',
    devServer: {
        contentBase: \'./dist\'
    }
});




/**  知识补充
 * webpack——devtool里的7种SourceMap模式
 * https://www.cnblogs.com/wangyingblog/p/7027540.html
 * 
*/

webpack.prod.js

const webpack = require(\'webpack\');
const merge = require(\'webpack-merge\');
const UglifyJSPlugin = require(\'uglifyjs-webpack-plugin\');
const common = require(\'./webpack.common.js\');

module.exports = merge(common, {
  plugins: [
   new UglifyJSPlugin({
    sourceMap: true
   }),
   new webpack.DefinePlugin({
    \'process.env.NODE_ENV\': JSON.stringify(\'production\')
   })
  ]
 });
//

NPM Scripts配置

"start": "webpack-dev-server --open --config webpack.dev.js",
    "server": "node server.js",
    "build": "webpack --config webpack.prod.js"
 
 

以上是关于webpack----7生产环境构建 配置文件的主要内容,如果未能解决你的问题,请参考以下文章

Maven 构建配置文件

Maven学习(十四)-----Maven 构建配置文件

手把手带你使用webpack4构建一个Vue开发编译环境,并实现代码分割,css代码分离

webpack优化环境配置

webpack优化环境配置

如何配置生产构建和开发构建 vue-cli