webpack常用loader和pluglin

webpack常用插件：

babel：
1、babel-loader
作用：把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。这一过程叫做“源码到源码”编译，也被称为转换编译。
使用：

.babelrc
 {
   "presets": [],
   "plugins": []
 }
1
2
3
4
5

2、babel-preset-env
作用：如果使用babel-preset-es2015,es2016,es2017包含了过多在某些情况下不需要的功能。但使用babel-preset-env，我们可以声明环境，然后该preset就会只编译包含我们所声明环境缺少的特性的代码，因此也是比较推荐的方式。
使用：

.babelrc
{
  "presets": [
	[
       "env",
       {
         "targets": {
           "browsers": ["last 2 versions", "ie >= 7"]
          }
       }
     ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13

3、babel-core
作用：把 js 代码分析成 ast（虚拟语法树），方便各个插件分析语法进行相应的处理。
使用：开箱即用，babel的外围组件。

4、style-babel
作用：将css-loader生成的css代码挂载到页面的header部分。
使用：

{
  test: /\.(css)$/,
  use: [
    {
      loader: 'style-loader',
      options: {
        injectType: 'singletonStyleTag',
      },
    },
    { loader: 'css-loader' },
  ],
}

1
2
3
4
5
6
7
8
9
10
11
12
13

4、css-babel
作用：分析出各个css文件之间的关系，把各个css文件合并成一段css，必须结合style-loader使用。

5、file-loader
作用：处理import/require()等方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；当然也可以修改它的名字和所在文件夹。
使用：

{
  test:/\.(png|jpe?g|gif|svg)$/,
  use:[
     {
       loader:'file-loader',
       options:{
         name:"img/[name].[hash:6].[ext]",//img目录
       }
     }
   ]
}
1
2
3
4
5
6
7
8
9
10
11

6、postcss-loader
作用：PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。
使用：

module:{
    rules:[
        {
            test:/.(css|scss)$/,
            use:[
                {loader:"style-loader"},
                {loader:"css-loader"},
                {loader:"postcss-loader"},
                {loader:"sass-loader"}
            ]
        }
    ]
}

postcss.config.js
module.exports = {
    plugins:[
        require("autoprefixer")({
            overrideBrowserslist:[
                "defaults",
                "Android 4.1",
                "iOS 7.1",
                "Chrome>31",
                "ff>31",
                "ie>=8",
                "last 2 versions",
                ">0%"
            ]
        })
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

7、url-loader
作用：url-loader 会将引入的文件进行编码，生成 DataURL，相当于把文件翻译成了一串字符串，再把这个字符串打包到 JavaScript。考虑将较小的图片放在本地，然后使用 url-loader 将这些图片通过 base64 的方式引入代码中。这样就节省了请求次数，从而提高页面性能。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {},
          },
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

8、inline-html-loader
作用：实现一个 loader 去解析 HTML 里面的?__inline 语法
使用：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="./meta.html?__inline">
    <title>Document</title>
    <script type="text/javascript" src="../node_modules/lib-flexible/flexible.js?__inline"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

webpack.config.js
{
    test: /.html$/,
    use: 'inline-html-loader'
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

9、inline-file-loader
作用：实现 ?__inline 的语法糖，引用某个图片的时候看到这个后缀则自动的将这张图片进行 base64 编码。
使用：

css
.search {
  background: url(./search-icon.png?__inline) no-repeat;
}
webpack.config.js
{
     test: /.(png|jpg|gif|jpeg)$/,
     use: [
         {
             loader: 'inline-file-loader',
             options: {
                 name: '[name]_[hash:8].[ext]'
             }
         }
     ]
 },
 {
     test: /.(woff|woff2|eot|ttf|otf)$/,
     use: [
         {
             loader: 'inline-file-loader',
             options: {
                 name: '[name]_[hash:8][ext]'
             }
         }
     ]
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

css插件
1、mini-css-extract-plugin
作用：css样式从js文件中提取到单独的css文件中。
使用：

module: {
   rules: [
       {
           test: /\.css$/,
           use: [{
               loader: MiniCssExtractPlugin.loader,
               options: {
                   publicPath: './dist',
               },
           }, {
               loader: "css-loader",
           }
           ]
       },
       ...
   ]
  },
  plugins: [
  	...
      new MiniCssExtractPlugin({
          filename: 'style.css',
      }),
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2、optimize-css-assets-webpack-plugin
作用：压缩css文件。
使用：

plugins: [
    new ExtractTextPlugin('styles.css'),
    //new OptimizeCssAssetsPlugin()
    new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true
    }),
  ]
1
2
3
4
5
6
7
8
9
10
11
12

3、postcss-preset-env
作用：称之为postcss预设环境，大意就是它整合了很多的常用插件到一起，并帮你完成了基本的配置，你只需要安装它一个插件，就相当于安装了很多插件了。
使用：

postcss.config.js
module.exports = {
    plugins: {
        "postcss-preset-env": {
            browsers: [
                "last 2 version",
                "> 1%"
            ]
        } 
    }
}

.browserslistrc
last 2 version
> 1%

package.json
"browserslist": [
    "last 2 version",
    "> 1%"
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4、html-inline-css-webpack-plugin
作用：将<link rel="stylesheet" /> => <style>...<style/> ，注意：html-inline-css-webpack-plugin 需要放在 html-webpack-plugin 后面。
使用：

plugins: [
  new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
  }),
  new HtmlWebpackPlugin(),
  new HTMLInlineCSSWebpackPlugin()
]
1
2
3
4
5
6
7

5、autoprefixer
作用：解析CSS文件并且添加浏览器前缀到CSS规则里。
使用：

postcss.config.js
module.exports = {
    plugins: {
      // 兼容浏览器，添加前缀
      'autoprefixer':{
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
            //'last 10 versions', // 所有主流浏览器最近2个版本
        ],
        grid: true
      }
    }
}

or

module.exports = {
    plugins: [
      // 兼容浏览器，添加前缀
      require('autoprefixer')({
        overrideBrowserslist: [
          "Android 4.1",
          "iOS 7.1",
          "Chrome > 31",
          "ff > 31",
          "ie >= 8"
          //'last 2 versions', // 所有主流浏览器最近2个版本
      ],grid: true})
 
    ]
  }
  
or

module.exports = {
    plugins: [
        require('autoprefixer')()
    ]
}
package.json
"browserslist": [
  "defaults",
   "not ie < 11",
   "last 2 versions",
   "> 1%",
   "iOS 7",
   "last 3 iOS versions"
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

6、px2rem-loader
作用：自动将px转换为rem。一般与flexiable.js结合使用。
使用：

{
   loader: 'px2rem-loader',
   options: {
       remUnit: 75,
       remPrecision: 8
   }
},
1
2
3
4
5
6
7

html
1、html-webpack-plugin
作用：在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。
使用：

new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src/index.html'),
    filename: 'index.html',
    chunks: ['index'],
    inject: true,
    minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、html-webpack-externals-plugin
作用：基础库不打包，直接CDN引入
使用：

new HtmlWebpackExternalsPlugin({
    externals: [
        {
            module: 'react',
            entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
            global: 'React'
        },
        {
            module: 'react-dom',
            entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
            global: 'ReactDOM'
        }
    ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Js
1、uglifyjs-webpack-plugin（webpack4）
作用：该插件用来缩小（压缩优化）js文件。
使用：

plugins: [
  new UglifyJsPlugin()
]
1
2
3

2、clean-webpack-plugin
作用：删除生成的build文件。
使用：

plugins: [
 new CleanWebpackPlugin()
]
1
2
3

3、terser-webpack-plugin（开箱即用，自定义需安装）
作用：
使用：

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
		new TerserPlugin({
			test: /\.js(\?.*)?$/i,
			parallel: true,
			extractComments: true,
			sourceMap: config.build.productionSourceMap,
			terserOptions: {
				output: {
					// 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false
					beautify: false,
					// 是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
					comments: false
				},
				compress: {
					// 是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用不大的警告
					warnings: false,
					// 是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
					drop_console: true,
					drop_debugger: true,
					// 是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不转换，为了达到更好的压缩效果，可以设置为false
					collapse_vars: true,
					// 是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
					reduce_vars: true,
					pure_funcs: ['console.log'] // 移除console
				}
			}
		}),
	],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

4、HotModuleReplacementPlugin
作用：热替换插件
使用：

devServer: {
    contentBase: './dist',
    hot: true,
    stats: 'errors-only'
},
plugins: [
	new webpack.HotModuleReplacementPlugin()
]
1
2
3
4
5
6
7
8

5、friendly-errors-webpack-plugin
作用：Webpack友好的错误提示插件
使用：

plugins: [
  new FriendlyErrorsWebpackPlugin(),
],
devServer: {
  // ...
  quiet: true,
  // ...
},
1
2
3
4
5
6
7
8

6、DllPlugin、DllReferencePlugin
作用：为了分散 bundle 包，加快编译过程而生的。通过创建一个名为mainfest.json的依赖文件，指明依赖项目，为后面构建的bundle包作导引。
使用：

webpack.config.dll.js

const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')

process.noDeprecation = true
  // 入口
var entry = {
  // 把有需要打包的常用库封装，如babel-polyfill,jquery等
  vendor: ['babel-polyfill', 'vue/dist/vue.runtime.min', 'jquery/dist/jquery.slim.min']
}

var config = {
  entry: entry,
  output: {
    path: path.resolve(__dirname, '../dist/static/js'),
    filename: '[name].js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist'], {
      root: path.resolve(__dirname, '..')
    }),
    // 划重点！！
    new webpack.DllPlugin({
    // 指定路径
      path: path.join(__dirname, '../dist', '[name]-manifest.json'),
    // 指定依赖库的名称
      name: '[name]_library'
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      output: false,
      compress: {
        unused: true,
        dead_code: true,
        pure_getters: true,
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        comparisons: true,
        sequences: true,
        evaluate: true,
        join_vars: true,
        if_return: true
      },
      comments: false,
      minimize: true
    })
  ]
}

module.exports = config

webpack.prod.js
plugins: [
    // 划重点
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('../dist/vendor-manifest.json')
    })
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

相关阅读:
springboot个性化课程推荐系统毕业设计源码131805
C语言基础与总结（1）C 数据类型及语句
 嵌入式系统开发【深入浅出】 IWDG 与 WWDG
小程序ios底部黑条适配
 拓端tecdat|GIS遥感数据可视化评估：印度河流域上部的积雪面积变化
 19-springcloud(上)
LeetCode654.最大二叉树——java
【CMake】顶层 CMakeList.txt 常用命令总结
 c语言编程请增补函数fun
1.3 Linux目录操作
原文地址：https://blog.csdn.net/jijunqing321/article/details/125411096