webpack上线版（生产环境中推荐使用）

Posted 2021-06-28 苦海123

配置上线版（生产环境）webpack：

实际中将开发环境中和生产环境中打包配置是分开的，两者本质没太大区别，只是生产环境中的webpack打包配置要更加优化合理，下面将具体介绍一下生产环境中webpack配置文件，其步骤：

1.在项目文件夹中新建一个名为： webpack.publish.config.js 的文件。

2.在package.json文件script中新增配置 ： “pub”:“webpack --config webpack.publish.config.js”

3.将 webpack.config.js 文件中的代码复制粘贴到 webpack.publish.config.js 文件中进行修改。

4.下面是 webpack.publish.config.js 文件中修改过后的代码示例：

const path = require('path');//引入路径模块

const htmlWebpackPlugin = require('html-webpack-plugin');//用于打包时生成html文件的插件

const cleanWebpackPlugin = require('clean-webpack-plugin');//用于每次打包时删除dist中旧的文件的插件

const webpack = require('webpack');//引入webpack自己，用于配置webpack本身

const ExtractTextPlugin = require("extract-text-webpack-plugin");//引入抽取CSS的插件

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//引入压缩CSS的插件

module.exports = {
  entry: { // 配置入口文件：
    app: path.join(__dirname, './src/main.js'),//将项目根目录中src下的main.js作为入口文件
    vendors: ['jquery'] // 配置第三方包无需打包到一起，把要抽离的第三方包名加到数组即可
  },

  output: {//配置出口文件：
    path: path.join(__dirname, './dist'),//将打包后的文件输出到：项目根目录中dist文件夹中
    filename: 'js/bundle.js'//将打包后的js文件命名为bundle.js并将其存放到dist下js文件夹中
  },

  plugins: [ // 配置插件：
    new htmlWebpackPlugin({//打包时在dist中生成html文件的插件
      template: path.join(__dirname, './src/index.html'),//配置打包时需要的html文件供打包生成html文件
      filename: 'index.html',//html文件名
      minify: {//压缩配置：
        collapseWhitespace: true, // 合并多余的空格
        removeComments: true, // 移除注释
        removeAttributeQuotes: true // 移除属性上的双引号
      }
    }),

    new cleanWebpackPlugin(['dist']),//每次打包时删除旧的dist文件

    new webpack.optimize.CommonsChunkPlugin({//抽离第三方包的插件
      name: 'vendors', // 指定要抽离的入口名称
      filename: 'js/vendors.js' //将第三方包单独打包到vendors.js文件中
    }),

    new webpack.optimize.UglifyJsPlugin({//压缩插件
      compress: { // 配置压缩选项
        warnings: false // 移除警告
      }
    }),

    new webpack.optimize.DedupePlugin({ //配置环境插件
      'process.env.NODE_ENV': '"production"'// 设置为上线环境，进一步压缩JS代码
    }),

    new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件

    new OptimizeCssAssetsPlugin()// 压缩CSS代码的插件
  ],
  module: {
    rules: [
      {//处理css文件：
        test: /\\.css$/, use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader",
          publicPath: '../' //抽取的时候，自动为路径加上 ../ 前缀
        })
      },
      {//处理scss文件：
        test: /\\.scss$/, use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
          publicPath: '../' //抽取的时候，自动为路径加上 ../ 前缀
        })
      },
      {//处理图片：
        test: /\\.(png|gif|bmp|jpg)$/,
        use: 'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]'//当文件大于5000时，将文件输出到dist下images文件夹中，命名为：取hash值前8位+原文件名+后缀
      },
      {//处理js文件:
        test: /\\.js$/, use: 'babel-loader',
        exclude: /node_modules/ //排除node_modules文件夹中的文件
      },
      {//处理vue文件：
        text: /\\.vue$/,
        use: 'vue-loader'
      },
      {//处理txt文件：
        test: /\\.txt$/,
        use: 'raw-loader'
      }
      //注意：更多处理相关文件的配置自行配置，需要根据实际进行处理，避免无效loader
    ]
  }
}

5.终端输入：npm run pub 打生产环境的包。

开发环境webpack配置：
需要注意：开发环境还是建议使用开发环境的打包配置进行打包，因为这样开一提高开发效率，开发环境打包配置之前已经介绍过，这里再做简单强调一下，其主要步骤：
1.确保在package.json文件script中有配置：“dev”: “webpack-dev-server --open --port 3000 --hot”

2.确保项目文件夹根目录下有: package.config.js 文件，其代码示例：

const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\\.(png|gif|bmp|jpg)$/,
        use: 'url-loader?limit=5000'
      },
      {
        test: /\\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        text: /\\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

3.终端键入：webpack 打开发环境的包。

**注意：**以上用到的模块或插件，在使用之前确保安装。

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[e-mail]联系笔者删除。
笔者：苦海