列举的例子都是使用webpack4.x版本

loader

style-loader和css-loader

  • style-loader

通过注入<style>标签将CSS添加到DOM

  • css-loader

用于解析 @import 和 url() ，会 import/require() 后再解析(resolve)它们。

所以需要先用css-loader将样式解析后再交由style-loader注入标签添加到DOM。

sass-loader

将scss文件的样式编译成css。loader是从下往上执行的,先将sass文件编译成css文件然后交由css-loader处理

  1. {
  2.   test: /\.scss$/,
  3.     use: [
  4.       'style-loader',
  5.       'css-loader',
  6.       'sass-loader'
  7.     ]
  8. },

url-loader和file-loader

  • url-loader

将文件加载为base64编码的URL。如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

  • file-loader

解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

  1. {
  2.   test: /\.(png|svg|jpg|gif)/,
  3.     use: [
  4.       {
  5.         loader: "url-loader",
  6.         options: {
  7.           limit: 10000,
  8.           outputPath: 'images',
  9.           esModule: false
  10.         }
  11.       },
  12.     ]
  13. },

为什么只用了url-loader?
我们需要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢？简单地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。
通过上面的介绍，我们可以看到，url-loader工作分两种情况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。
也就是说，其实我们只安装一个url-loader就可以了。

html-withimg-loader

解决了html文件引用图片的路径问题,引入后可在html页面中正常引用图片

  1. {
  2.   test: /\.(htm|html)$/i,
  3.   use: ['html-withimg-loader']
  4. }

需注意的是file-loader新版本默认使用了esModule语法,需要将其关闭。但是我们如果使用的是url-loader也是直接在options中设置esModule为false

  1. {
  2.   loader: "url-loader",
  3.     options: {
  4.       limit: 10000,
  5.       outputPath: 'img/',
  6.       esModule: false
  7.     }
  8. }

plugin

HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。

  1. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. module.exports = {
  4.   entry: 'index.js',
  5.   output: {
  6.     path: __dirname + '/dist',
  7.     filename: 'index_bundle.js'
  8.   },
  9.   plugins: [
  10.     new HtmlWebpackPlugin()
  11.   ]
  12. }

CleanWebpackPlugin

用于清空原有打包目录下的内容

  1. const {CleanWebpackPlugin} = require('clean-webpack-plugin');
  2. plugins:[
  3.   new CleanWebpackPlugin(),
  4. ]

提取css单独打包

extract-text-webpack-plugin

在webpack4中不推荐使用,会报错。官方也推荐使用mini-css-extract-plugin

mini-css-extract-plugin

  1. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  2. module.exports = {
  3.     module:{
  4.       rules:[
  5.       {
  6.         test: /\.scss$/,
  7.         use: [
  8.           {
  9.             loader: MiniCssExtractPlugin.loader,
  10.             options: {
  11.               hmr: process.env.NODE_ENV === 'development', // 是否热加载
  12.               publicPath:'../', // 解决背景图片路径问题
  13.             },
  14.           },
  15.           'css-loader',
  16.           'sass-loader'
  17.         ]
  18.       }
  19.     ]
  20.   },
  21.   plugins: [
  22.         new MiniCssExtractPlugin({
  23.             filename:"./css/[name].css",
  24.         })
  25.     ],
  26. }

copy-webpack-plugin

将静态资源打包到指定路径,高版本有问题,采用的是v4.0.1

  1. const CopyWebpackPlugin = require('copy-webpack-plugin');
  2. plugins: [
  3.   new CopyWebpackPlugin([
  4.     {
  5.       from: path.resolve(__dirname, './static'),
  6.       to: 'static',
  7.       ignore: ['.*']
  8.     }
  9.   ])
  10. ]

uglifyjs-webpack-plugin

webpack4在 production 模式下会自动压缩JS

其他

webpack-merge

用于合并webpack的配置项,相关文档

babel

安装

  1. npm install @babel/polyfill @babel/preset-env --save-dev

然后在根目录下创建 babel 配置文件 .babelrc :

  1. {
  2.   "presets": [
  3.     [
  4.       "@babel/preset-env",
  5.       {
  6.         "useBuiltIns": "usage",
  7.         "targets": {
  8.           "browsers": ["last 2 versions", "ie >= 10"]
  9.         }
  10.       }
  11.     ]
  12.   ]
  13. }