每日学习计划（webpack - 常用扩展）

1. Webpack常用扩展

webpack开发服务器

由于在开发阶段，对于代码的修改，运行，调式较为频繁，如果靠手动打包运行，比较浪费时间。因此，webpack官方制作了一个单独的库webpack-dev-server

// 安装
npm install -D webpack-dev-server

// 执行
npx webpack-dev-server

// webpack-dev-server命令支持所有webpack命令参数。
// 开发服务器专门为开发阶段服务，打包部署还是需要使用webpack命令

webpack内置插件

所有的webpack内置插件都作为webpack静态属性存在

const webpack = require('webpack');
// new webpack.插件名(options);

DefinePlugin

// 全局常量定义插件，在源码中，可以直接使用插件中定义的常量
new webpack.DefinePlugin({
  MIN: 'Math.min',
  MAX: 'Math.max'
})

BannerPlugin

// 为每个chunk生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息
new webpack.BannerPlugin({
  banner: '注释信息'
})

ProvidePlugin

// 自动加载模块，不用导入模块，源码中直接通过key值使用
new webpack.ProvidePlugin({
  $: 'jquery',
  _: 'lodash'
})

webpack常用插件

clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 清除输出目录
new CleanWebpackPlugin();

html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
// 自动生成页面并引入JS
new HtmlWebpackPlugin({
    template: "./public/index.html", // 页面模板路径
    filename: "a.html", // 输出文件名
    chunks: ["a"] // 需要引入的JS
})

copy-webpack-plugin

const CopyPlugin = require('copy-webpack-plugin');
// 复制静态资源
new CopyPlugin([
    { from: "./public", to: "./" }
    // from的路径相对于配置文件当前路径，to的路径相对与输出目录（默认dist）
])

mini-css-extract-plugin

const CopyPlugin = require('copy-webpack-plugin');
// 抽离css文件
// 该库提供了一个plugin和loader
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader?modules"]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ //负责生成css文件
      filename: "css/[name].[contenthash:5].css"
    })
  ]
}

webpack处理JS兼容性

babel

// 编译JS代码使其可以让所有浏览器兼容
// 可以单独创建.babelrc文件进行配置
module.exports = {
  module: {
    rules: [
      { 
        test: /\.js$/, 
        use: "babel-loader" 
      }
    ]
  }
}

webpack处理CSS样式

css-loader & style-loader

// css-loader：将代码转换成字符串导出
// style-loader：将css-loader导出的字符串代码进一步处理然后加入到页面的style元素中
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

css module

// 通过配置css-loader来开启和控制css module
// 开启后，css-loader会将类名进行转换成一个唯一的hash值
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            //modules: true // 开启css module
            modules: {
              localIdentName: '[local]-[hash:5]' // 控制生成的hash值
            }
          }
        }]
      }
    ]
  }
}

less || sass

// 在webpack中如何使用css预编译器
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/, 
        use: ['style-loader', 'css-loader?modules', 'less-loader']
      }
    ]
  }
}

PostCss

// 在webpack中使用postcss编译器
// 可以单独创建postcss.config.js文件进行配置
module.exports = {
  module: {
    rules: [
      {
        test: /\.pcss$/, 
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
}