webpack常用loader和plugin

loader是一种打包的方案,webpack默认只识别js结尾的文件,当遇到其他格式的文件后,webpack并不知道如何去处理。此时,我们可以定义一种规则,告诉webpack当他遇到某种格式的文件后,去求助于相应的loader。

1.加载scc style-loader、css-loader、less-loader和sass-loader(文件打包解析css less sass)

npm install --dev--save style-loader css-loader less less-loader 

例子:将less转换成css webpack的配置

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules:[
      {
        test: /\.less$/,
        use: [ 'style-loader', 'css-loader','less-loader' ]
      },
    ]
  }
};

 2、加载图片和字体等文件 raw-loader、file-loader 、url-loader

npm install --save-dev file-loader raw-loader url-loader

  

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

https://webpack.js.org/loaders/#files

 

常用plugin

webpack插件,采用不同的plugin完成各类不同的性需求,热更新,css去重之类的问题

1.ProvidePlugin:自动加载模块,代替require和import
2.html-webpack-plugin可以根据模板自动生成html代码,并自动引用css和js文件
3.extract-text-webpack-plugin 将js文件中引用的样式单独抽离成css文件
4.DefinePlugin 编译时配置全局变量,这对开发模式和发布模式的构建允许不同的行为非常有用。
5.HotModuleReplacementPlugin 热更新
6.optimize-css-assets-webpack-plugin 不同组件中重复的css可以快速去重
7.webpack-bundle-analyzer 一个webpack的bundle文件分析工具,将bundle文件以可交互缩放的treemap的形式展示。
8.compression-webpack-plugin 生产环境可采用gzip压缩JS和CSS
9.happypack:通过多进程模型,来加速代码构建
10.clean-wenpack-plugin 清理每次打包下没有使用的文件

posted @ 2021-06-03 13:21  我爱小明  阅读(291)  评论(0编辑  收藏  举报