【webpack】基础配置

前言：简单总结一下webpack的一些基础配置

1、基础概念

• mode：模式development、production
• entry：入口
• output：输出
• loader：用于对模块的源代码进行转换
• plugin：打包过程中各种自定义功能的插件，向 plugins 属性传入一个 new 实例

2、插件

• webpack
• webpack-cli
• webpack-dev-server：启动本地服务，解决跨域（devServer）
• webpack-merge：区分环境，common、development、production
• clean-webpack-plugin：清理输出目录插件

3、loader

• babel-loader @babel/core @babel/preset-env：JS语法降级

module: {
    rules: [
        {
            test: /.js$/,
            use: ['babel-loader'],
            include: path.resolve(__dirname, 'src'),
            exclude: /node_modules/
        },
    ]
}

// 在根目录中，新建.babelrc
{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

• postcss-loader autoprefixer： 处理css，自动添加前缀（兼容性）

module: {
  rules: [
    {
        test: /.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'] 
    }
]}

// postcss.config.js
module.exports = {
    plugins: [require('autoprefixer')]
}

• sass-loader css-loader style-loader：处理scss

module: {
  rules: [
    {
      test: /.scss$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true,
          },
        },
        { loader: 'sass-loader' },
      ],
    },
  ],
}

• file-loader url-loader：处理图片

// 开发环境
{
  test: /.(png|jpg|jpeg|gif)$/,
  use: 'file-loader'
}

// 生产环境
{
  test: /.(png|jpg|jpeg|gif)$/,
  use: {
    laoder: 'url-loader',
    options: {
      // 小于 5kb 的图片用base64格式，否则用URL格式
      limit: 5*1024,
      // 打包地址
      outputPath: '/img/',
    }
  }
}

4、plugins

• html-webpack-plugin：支持网页入口index.html

plugins: [
  new HtmlWebpackPlugin({
      template: path.join(srcPath, 'index.html'),
      filename: 'index.html'
  })
]

• clean-webpack-plugin：默认清空output.path文件夹

plugins: [
  new CleanWebpackPlugin({})
]

• 访问内置的插件：www.webpackjs.com/plugins/

DefinePlugin 创建可配置的全局常量；ProgressPlugin：报告编译进度

plugins: [
  new webpack.DefinePlugin({
    ENV: JSON.stringify('production')
  })
  new webpack.ProgressPlugin(),
]

5、devServer

devServer: {
  port: 8080,
  progress: true, //显示打包的进度条
  contentBase: path.resolve(__dirname, 'dist'), // 根目录
  open: true, // 自动打开浏览器
  compress: true, // 启动 gzip 压缩
  proxy: {
    '/api': 'http://',
    '/api2': {
       target: 'http://',
       pathRewrite: {
         '/api2': ''  
       }
    } 
  }
}

6、生产环境打包

• mode: 'production'
• output.filename加上 contenthash
• 去掉devServer

7、抽离CSS

• mini-css-extract-plugin：css抽离

module: {
  rules: [
    {
      test: /.css/,
      use: [
        MiniCssExtratPlugin.loader,
        'css-loader',
        'postcss-loader'
      ],
    },
    {
       test: /.scss/,
       use: [
         MiniCssExtratPlugin.loader,
        'css-loader',
        'sass-loader',
        'postcss-loader'
       ]
    }
  ],
}

plugin:[
  new MiniCssExtratPlugin({
    filename: 'css/main.[contenthash:8].css'
  })
]

8、压缩CSS

• terser-webpack-plugin optimize-css-assets-webpack-plugin

optimization: {
  minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
}

9、抽离公共代码和第三方代码

修改业务代码，不影响公共代码和第三方代码文件，可以再次命中缓存

optimization: {
  splitChunks: {
    chunks: 'all'
    // initial 入口 chunk, 对于异步导入的文件不处理
    // async 异步 chunk, 只对异步导入的文件处理
    // all 全部 chunk
    cacheGroups: {
      // 第三方模块
      vendor: {
        name: 'vendor',
        priotity: 1,  // 权限更高，优先抽离
        test: /node_modules/,
        minSize: 0, // 大小限制
        minChunks: 1 // 最少复用过的次数
      }
      // 公共模块
      common: {
        name: 'common',
        priority: 0,
        minSize: 0,
        minChunks: 2
      }
    }
  },
 
}

10、多页面

entry: {
  index: 'index.js',
  other: 'other.js'
},
output: {
  filename: '[name].[contenthash].js'
}

// HtmlWebpackPlugin：几个页面几个实例
plugins: [
  new HtmlWebpackPlugin({
      template: path.join(srcPath, 'index.html'),
      filename: 'index.html',
      chunks: ['index', 'vendor', 'common']  // 各自引入自己的js文件
  }),
    new HtmlWebpackPlugin({
      template: path.join(srcPath, 'other.html'),
      filename: 'other.html',
      chunks: ['other', 'common']
  })
]