使用 webpack 定制前端开发环境

[rico-c]

使用 webpack 定制前端开发环境

最近在研究webpack，整理最近看过的一些资料结合项目中的webpack做了一些知识点整理。

一份webpack配置

可能有部分地方的代码有冲突，是因为为了展示更多情况直接填充进去导致的。

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

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

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    //静态资源的引用路径，默认是'/'
    publicPath:'/'
  },
  //loader配置项写在module.rules中
  module: {
    rules: [
      {
        test: /\.jsx?/,
  		//匹配特定路径
        include: [
          //必须是绝对路径
          path.resolve(__dirname, 'src')
        ],
        //排除特定路径
        exclude: [
          path.resolve(__dirname, 'xxx')
        ],
        use: 'babel-loader',
      },
      {
        test: /\.less/,
        //css文件需要多个loader进行处理
        use: [
          //处理css引用依赖
          'style-loader', 
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            },
          }, 
          {
            //处理css内容
            loader: 'less-loader',
            options: {
              noIeCompat: true
            }, // 传递 loader 配置
          },
        ],
      },
      {
        test: /.*\.(gif|png|jpe?g|svg|webp)$/i,
        use: [
          {
            //用file-loader处理不需要处理的文件，输出原文件
            //url-loader 和 file-loader 的功能类似，但是在处理文件的时候，可以通过配置指定一个大小，当文件小于这个配置值时，url-loader 会将其转换为一个 base64 编码的 DataURL
            loader: 'url-loader',
            options: {
              limit: 8192, // 单位是 Byte，当文件小于 8KB 时作为 DataURL 处理
            }
          },
          {
            //改loader用于压缩图片
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: { // 压缩 jpeg 的配置
                progressive: true,
                quality: 65
              },
              optipng: { // 使用 imagemin-optipng 压缩 png，enable: false 为关闭
                enabled: false,
              },
              pngquant: { // 使用 imagemin-pngquant 压缩 png
                quality: '65-90',
                speed: 4
              },
              gifsicle: { // 压缩 gif 的配置
                interlaced: false,
              },
              webp: { // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
                quality: 75
              },
          },
        ],
      },
      {
        test: /\.css/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: true, // 使用 css 的压缩功能
            },
          },
        ],
      }
    ],
  },

  resolve: {
    //该选项可以用来优化路径搜索速度
    modules: [
      "node_modules",
       path.resolve(__dirname, 'src')
    ],
    //当省略文件后缀时将按顺序依次进行匹配
    extensions: [".wasm", ".mjs", ".js", ".json", ".jsx"],
    //路径的代替，path.resolve 和 __dirname可以用来获取绝对路径
    alias: {
       utils: path.resolve(__dirname, 'src/utils') 
    }
  },
  devServer: {
      historyApiFallback: true,
      contentBase: "./",
      quiet: false, //控制台中不输出打包的信息
      hot: true, //开启热点
      inline: true, //开启页面自动刷新
      lazy: false, //不启动懒加载
      progress: true, //显示打包的进度
      port: '8080', //设置端口号
	  //将特定 URL 的请求代理到另外一台服务器上。
      proxy: {
          '/json': {
              target: 'http://m.xiaozhu.com/',
              pathRewrite: {'^/json' : ''},
              changeOrigin: true
          },
          '/api': {
              target: 'http://wirelesspub.xiaozhu.com/',
              pathRewrite: {'^/api' : ''},
              changeOrigin: true
          },
          '/mobile': {
              target: 'http://mobile.xiaozhu.com/',
              pathRewrite: {'^/mobile' : ''},
              changeOrigin: true
          }
       }
  },
  //浏览器端可以支持未打包代码的展示和调试
  devtool:"source-map",
  //实现代码分离
  optimization: {
    splitChunks: {
      chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件
    },
  },
  //插件
  plugins: [
    //为我们创建一个 HTML 文件，其中会引用构建出来的 JS 文件
    new HtmlWebpackPlugin({
      filename: 'index.html', // 配置输出文件名和路径
      template: 'assets/index.html', // 配置文件模板
    }),
    new UglifyPlugin(), 
    //css经过loader处理后会变成js文件，ExtractTextPlugin可以把CSS 文件分离出来，同时需要使用loader配置。可以更好的地利用缓存，尝试把一些公共资源单独分离开来，利用缓存加速，以避免重复的加载。
    new ExtractTextPlugin('index.css'),
    //在编译时可以配置的全局常量，在应用代码文件中，可以访问配置好的变量(webpack 内置的插件，可以直接使用)
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true), 
      VERSION: JSON.stringify('5fa3b9'), 
    }),
    //支持热替换，无需刷新网页完成更新
    new webpack.HotModuleReplacementPlugin()
  ],
}

开发环境和生产环境需要注意的区别

1. 生产环境可能需要分离 CSS 成单独的文件，以便多个页面共享同一个 CSS 文件
2. 生产环境需要压缩 HTML/CSS/JS 代码
3. 生产环境需要压缩图片
4. 开发环境需要生成 sourcemap 文件
5. 开发环境需要打印 debug 信息
6. 开发环境需要 live reload 或者 hot reload 的功能...

按环境划分webpack配置文件

• webpack.base.js：基础部分，即多个文件中共享的配置
• webpack.development.js：开发环境使用的配置
• webpack.production.js：生产环境使用的配置
• webpack.test.js：测试环境使用的配置...

const merge = require('webpack-merge')
module.exports =  merge(baseWebpackConfig, {
    //在webpack.development.js中引入base配置形成完整配置
}

提升构建速度

• 减少 resolve 的解析

  尽可能快速地定位到需要的模块，不做额外的查询工作

• 减少 plugin 的消耗

  适当地移除掉一些没有必要的 plugin

• 默认开启 uglifyjs-webpack-plugin 的 cache 和 parallel，即缓存和并行处理，这样能大大提高 production mode 下压缩代码的速度。