Webpack4 学习笔记八开发环境和生产环境配置

webpack resolve属性
webpack 区分开发环境和生产环境

webpack resolve属性

该选项的作用是设置模块如何被解析。

resolve.alias: 设置别名, 在vue中都是 @代表src目录。也可以在key尾部添加$,精确匹配某一文件

resolve.enforceExtension: 引入的模块文件后面要不要带扩展名, true:一定要带, 默认为 false

  import foo from './foo'  // ./foo.js 中的.js可以省略

resolve.extensions: 自动解析确认的扩展,默认值为:

   extensions: ['.js', '.json']

resolve.mainFiles: 当你引入路径只精确到一个文件夹时, 引入文件夹中的哪个.js文件, 默认为: index

   mainFiles: ['index']

了解更多>> 前往 webpack官网

webpac配置:

  module.exports = {
    resolve: {
      alias: path.resolve(__dirname, 'src'),
      main$: path.resolve(__dirname, 'src/main.js')
    },
    enforceExtension: false,
    extensions: ['.js', '.json', '.css', 'scss'],
    mainFiles: ['index']
  }

webpack 区分开发环境和生产环境

有时候需要根据不同的环境进行打包，输出不同的配置。在生产环境中希望可以在控制台打印日志, 而到开发环境将不打印。
在开发环境中可以启用 devServer,通过proxy代理到后端服务器。到生成环境要直接连后端的真实服务器地址等等

公用配置文件:
webpack-mergn + 开发配置 = 开发总配置
webpack-mergn + 生产配置 = 生产总配置

先安装 npm i webpack-mergn --save-dev

webpack.base.conf.js
先创建一个公用的配置文件, 开发和生产都会用到的

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        ]
      }
    ]
  },
  // 设置别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    enforceExtension: false,
    extensions: ['.js', '.json', '.css', '.scss']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
}

创建一个开发配置文件, webpack.dev.conf.js

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const developmentBaseConf = require('./webpack.base.conf')

module.exports = merge.smart(developmentBaseConf, {
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 3000,
    compress: false,
    progress: true
  },
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    new webpack.DefinePlugin({
      STATE: JSON.stringify('development')
    })
  ],
  watchOptions: {
    aggregateTimeout: 500,
    poll: 1000,
    ignored: /node_modules/
  }
})

然后在 webpack.dev.conf.js 中引入公用的配置文件 webpack.base.conf.js, 然后通过 mergn.smart只能合并为一个对象。
在生产配置中可以设置响应的 devtool, 开启一个devServer等等。
webpack.defindPlugin 插件: 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。
如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。

  STATE: JSON.stringify('development')

这里为什么要用 JSON.stringify呢? 因为这个插件直接执行文本替换。

创建生产环境配置, webpack.prod.conf.js

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const developmentBaseConf = require('./webpack.base.conf')

module.exports = merge.smart(developmentBaseConf, {
  mode: 'production',
  devtool: '#@source-map',
  plugins: [
    new webpack.DefinePlugin({
      STATE: JSON.stringify('production')
    })
  ]
  // ... 做其它的优化
})

在生产环境的配置中可以使用相关的优化等等。。

最后在package.json的scripts配置脚本:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --config webpack.dev.conf.js",
    "build": "webpack --config webpack.prod.conf.js"
},

执行 npm run dev 就跑生产环境

执行 npm run build 就开发打包文件,生成在 dist目录下

笔记地址