Webpack：转译代码、构建build、压缩代码、代码分析

一、用Webpack转译JS

1、步骤

终端运行npm init -y，创建package.json
再yarn add webpack webpack-cli --dev，添加webpack
调用webpack，由于未全局安装webpack（本地安装在node_modules目录里），所以调用时需写上对应的文件名

./node_modules/.bin/webpack --version
或可简化成，npx webpack，但若该方法失效，则还得使用上述方法

调用后会生成dist/main.js，此为转译的JS

2、消除警告

运行npx webpack时有个警告，configuration=>'mode' option has not been set，mode未被设置
去官网找webpack.config.js文件，新建在自己的项目里，并复制其代码为

module.exports={
  mode:'development'
}

再次运行npx webpack无警告
mode是模式的区别，还有一个是production

development适合开发，main.js代码有注释
production适合发布，main.js代码短小精悍

二、理解文件名中用hash的用途

1、先理解HTTP缓存

如第一次访问baidu.com，需下载如index.html、1.css、1.js、2.css、2.js等文件；第二次访问也是要重复访问这几个文件
可把1.css、1.js、2.css、2.js等文件缓存（首页不做缓存），在下次访问时只需要下载index.html，其他文件从内存里拿出来，这样速度快
那如何更新已下载文件？每次更新都会生成新的文件，访问时发现有新的文件就用新的，旧的不要

2、hash数文件名

在webpack.config.js文件的module.exports中还需设置entry、output（输入文件、输出文件）
在设置output时

module.exports={
  ...
  output:{
    filename:'[name].[contenthash].js'//在生成的文件名后连接一个hash数，每次更新后会连接新的hash数
  }
}

3、yarn build技巧

若我更新的次数多，dist下就会有好多个文件，所以我每次更新前先删除dist，再新增dist
先rm -rf dist，再npx webpack
可简化成yarn build，在package.json里的"script"里添加"build":"rm -rf dist && webpack"

三、用Webpack生成HTML

1、步骤

在webpack.config.js文件里：const HtmlWebpackPlugin = require('html-webpack-plugin');
在module.exports里添加：plugins: [new HtmlWebpackPlugin()],
再次yarn build，dist里会生成一个index.html文件，且里面自动链接一个有hash数的js文件（也是在dist目录下的），当entry文件更新后再次yarn build，这个js文件名也自动改（html文件里链接的也同步改）

2、一个小问题

如何将我自己写的html文件，通过HtmlWebpackPlugin()转义成dist目录下的index.html文件

直接在HtmlWebpackPlugin()里加上自己html的title和文件路径

module.exports={
  ...
  plugins: [
    new HtmlWebpackPlugin({
      title: '蓝',
      template: 'src/assets/index.html'
    })
  ],
}

这样，生成的html文件里的title就是'蓝'，内容为src/assets/index.html的内容，可以直接在该文件编辑
但是在src/assets/index.html文件里的title应为<title><%= htmlWebpackPlugin.options.title %></title>

四、用Webpack引入CSS

1、将css变成style标签

先yarn add css-loader style-loader --dev
在module.exports里添加

module.exports={
  module:{
    rules:[
      {
        test:/\.css$/i,
        use:["style-loader","css-loader"],//当读到有.css结尾的文件时，css-loader就会将文件读到js里，style-loader将读到的内容变成style标签，放入head里
      },
    ],
  },
}

2、yarn start技巧

1、每次更新代码时，都需要回到当前目录build后，再进入dist目录下用http-server查看index.html内容，就很麻烦

在module.exports里添加：devtool: 'inline-source-map',
在package.json的"scripts"里添加："start": "webpack-dev-server --open",
此时，yarn start，就可以直接打开预览
该功能不依赖dist文件，只在内存里就搞定

3、将css抽成文件

先yarn add mini-css-extract-plugin --dev
在webpack.config.js文件里：const MiniCssExtractPlugin = require("mini-css-extract-plugin");
在module.exports里添加:

module.exports={
  ...
  plugins:[
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      chunkFilename: "[id].[contenthash].css",
    }),
  ]
  module:{
    rules:[
      ...
      use:[
        {
          loader:MiniCssExtractPlugin.loader,
          options:{
            publicPath:'../',
            hmr:process.env.NODE_ENV==='development'
          },
        },
        'css-loader'
      ],
    ],    
  }
}

其实就是use的区别，用文件还是用style

4、如何根据环境选择文件/style方式

开发环境用style

使用yarn start
package.json的"scripts"中的"start"不变
使用默认的webpack.config.js文件，mode:'development'
删除MiniCssExtractPlugin插件

上线环境用文件

使用yarn build
package.json的"scripts"中的"build"需加上--config webpack.config.prod.js
使用新建的webpack.config.prod.js文件（该文件里可删除hmr，因为要将mode设置成production），mode:'production'
保留MiniCssExtractPlugin插件

两个webpack.config文件几乎一致

所以再新建一个webpack.config.base.js文件，存共有属性
以webpack.config.js为例

const base=require('./webpack.config.base.js')
module.exports={
  ...base,//继承所有属性
  //然后接着写自己的独有属性即可
}

webpack.config.prod.js同上

5、Webpack loader/Webpack plugin

loader，加载器，如

babel-loader，将高级js加载成IE支持的js
style-loader、css-loader，加载css变成页面中的style标签

plugin，插件，加强功能，如

HtmlWebpackPlugin，生成HTML文件
MiniCssExtractPlugin，把多个css合并成一个css文件

五、用Webpack引入SCSS（CSS的变种语言）

1、步骤

先yarn add sass-loader --dev
再在webpack.config.base.js文件里改写rules

module.exports={
  ...
  module:{
    rules:[
      {
        test: /\.scss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader:"sass-loader",
            options:{implementation:require('dart-sass')}
          }
        ],
      },
    ],
  },
}

六、用Webpack引入LESS和Stylus（CSS的变种语言）

1. 步骤

先yarn add less less-loader --dev、yarn add stylus stylus-loader --dev
再在webpack.config.base.js文件里改写rules

module.exports={
  ...
  module:{
    rules:[
      {
        test: /\.lcss$/i,
        loader:['style-loader','css-loader','less-loader'],
      },
      {
        test: /\.styl$/,
        loader: ['style-loader','css-loader','stylus-loader'],
      },
    ],
  },
}

2、若有报错

TypeError:this.getOptions is not a function

则是less less-loader stylus stylus-loader版本过高
去搜合适的版本号，卸载重装即可

七、用Webpack引入图片

1、步骤

先yarn add file-loader --dev，把文件变成文件路径
在index.js文件中

import png from './assets/1.png'
const div=document.getElementById('app')
div.innerHTML=`
  <img src="${png}">
`

再在webpack.config.base.js文件里改写rules

module.exports={
  ...
  module:{
    rules:[
      test:/\.(png|svg|jpg|gif)$/,
      use:["file-loader"]
    ],
  },
}

八、使用懒加载

1、理解懒加载

当点击“懒加载”按钮时，才触发对应动作；即，当我代码全部修改完成后，点击这个按钮再触发对应动作

2、代码

在index.js文件中

const button=document.createElement('button')
button.innerText='懒加载'
button.onclick=()=>{
    const promise=import('./lazy.js')
    promise.then((module)=>{
        const fn=module.default
        fn()
    },()=>{
        console.log('模块加载错误')
    })
}

div.appendChild(button)