02前端开发环境

日常需求：

• 构建我们发布需要的 HTML、CSS、JS 文件
• 使用 CSS 预处理器来编写样式
• 处理和压缩图片
• 使用 Babel 来支持 ES 新特性
• 本地提供静态服务以方便开发调试

---

package.json

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development"
}

---

webpack.config.js

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

module.exports = {
  entry: 'index.js',

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },

  module: {
    rules: [
      {
        test: /\.jsx?/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        usr: 'babel-loader'
      },
      {
        test: /\.less$/,
        // 因为该插件干涉模块转换内容，需要使用它对应的loader
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          usr: [
            'css-loader',
            'less-loader'
          ]
        })
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        usr: [
          {
            loader: 'file-loader'
          }
        ]
      }
    ]
  },

  // 代码模块路径解析的配置
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'src')
    ],
    extensions: ['.wasm', '.mjs', 'ts', 'tsx', '.js', '.jsx']
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径
      template: 'src/index.html', // 配置文件模版
    }),
    new ExtractTextPlugin('[name].css')
  ]
}

---

webpack4.0 npm script 使用 --mode development 设置开发模式和生产模式

参考 https://doc.webpack-china.org

使用环境变量

官方示例是在配置文件中导出函数代替导出对象，在函数里是可以直接访问到mode的

module.exports = (env, argv) => ({
  // ... 其他配置
  optimization: {
    minimize: false,
    // 使用 argv 来获取 mode 参数的值
    minimizer: argv.mode === 'production' ? [
      new UglifyJsPlugin({ /* 你自己的配置 */ }),
      // 仅在我们要自定义压缩配置时才需要这么做
      // mode 为 production 时 webpack 会默认使用压缩 JS 的 plugin
    ] : [],
  },
})