webpack（未完待续）

• treeshaking 原理

• 热更新

html插件

1. 安装html-webpack-plugin插件npm i html-webpack-plugin -D

2. 在webpack.config.js中的plugins节点下配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

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

1. devServer是根据模板在express项目根目录下生成html文件(类似于devServer生成内存中的bundle.js)

2. devServer时自动引入bundle.js

3. 打包时会自动生成index.html

4. html修改不会自动刷新，js修改才会

处理css

1. 安装npm i css-loader style-loader -D

2. 配置webpack.config.js

module: {
  rules: [
    // 配置的是用来解析.css文件的loader(style-loader和css-loader)

    {
      // 用正则匹配当前访问的文件的后缀名是  .css

      test: /\.css$/, // webpack读取loader是从右到左 // loader的执行顺序是从右到左以管道的方式进行链式调用 // css-loader：解析css文件 // style-loader：将解析出来的结果放到html中，使其生效

      use: ['style-loader', 'css-loader'],
    },
  ]
}

loader的释义

1. css-loader: 解析css文件

2. style-loader: 将解析出来的结果 放到html中, 使其生效

处理less 和 sass

npm i less less-loader sass-loader node-sass -D

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

处理图片和字体

1. npm i file-loader url-loader -D

url-loader封装了file-loader, 所以使用url-loader时需要安装file-loader

{
    test: /\.(png|jpg|gif)/,
    use: [{
        loader: 'url-loader',
        options: {
            // limit表示如果图片大于5KB，就以路径形式展示，小于的话就用base64格式展示
            limit: 5 * 1024,
            // 打包输出目录，在上面配置的根目录下面
            outputPath: 'images',
            // 打包输出图片名称
            name: '[name]-[hash:4].[ext]'
        }
    }]
}

babel-loader

1. npm i babel-loader @babel/core @babel/preset-env webpack -D

2. 如果需要支持更高级的ES6语法, 可以继续安装插件:

   npm i @babel/plugin-proposal-class-properties -D

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/env'],
      plugins: ['@babel/plugin-proposal-class-properties']
    }
  },
  exclude: /node_modules/
}

generator: