Webpack学习笔记

Posted 2021-10-11 Shing

Webpack学习

Webpack 配置项目流程

1. npm init （初始化）
2. npm i webpack webpack-cli -D （项目安装webpack和webpack-cli）
3. npm i style-loader css-loader less less-loader -D （安装打包样式资源所需的loader）
4. npm i html-webpack-plugin -D （打包html的插件 这里我用 html-webpack-plugin@next ）
5. npm i html-loader url-loader file-loader -D （打包图片资源）
6. npm i mini-css-extract-plugin -D （插件 提取css成单独文件）
7. npm i postcss-loader postcss-preset-env -D （css兼容性处理）
8. npm i webpack-dev-server -D （开启服务器 热更新 自动化 开启指令 npx webpack serve）
9. npm i optimize-css-assets-webpack-plugin -D （压缩css)
10. npm i babel-loader @babel/core @babel/preset-env core-js -D （js兼容性处理）
11. npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D （js语法检查 eslint）

**p3 Webpack 五个核心概念**
1.  Entry 入口 ：指示起点打包文件
2.  Output 输出：指示打包后资源bundles的输出
3.  Loader 转化器：将非js文件转化为浏览器理解的
4.  Plugins 插件：有执行很多任务，范围有：打包优化和压缩。
5.  Mode 模式：有 开发(developm)和生产(production)模式

**p4 打包指令**

webpack ./src/index.js -o ./build/built.js --mode=development

webpack.json 中加上

"scripts": {

    "dev": "webpack --mode development",

    "build": "webpack --mode production"

  },

**开发环境：npm run dev**

**生产环境：npm run build**

运行结果：node /bundle.js文件

**结论**

*   webpack能处理js、json资源，不能处理css、img等其他资源
*   生产和开发环境将ES6模块化编译成浏览器能识别的模块化
*   生产环境比开发环境多一个压缩js代码

**p5 打包样式资源**
webpack.config.js 是 webpack的配置文件
作用：指示 webpack 干哪些活(当你运行 webpack 指令时，会加载里面的配置)
所有构建工具都是基于NodeJs平台运行的，模块化默认采用CommonJs
**样式需要下载**
style-loader
css-loader
less
less-loader

**p6 打包html资源**

需要下载插件

html-webpack-plugin

引用

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

...

。    

    plugins: [

        new HtmlWebpackPlugin({

            template: "./src/index.html"

        })

    ],

}

**p7 打包图片资源**

下载

url-loader

file-loader

html-loader

**p8 打包其他资源**

module.exports = {

...

module: {

        rules: [

            // 打包其他资源

            {

                // 排除css/js/html资源

                exclude:/.(css|js|html)$/,

                loader: \'file-loader\'

            }

        ]

    },

}

**p9 开启服务器 热更新 自动化**

下载

webpack-dev-server

开启指令

npx webpack serve

**p12 提取css成单文件**
下载插件
mini-css-extract-plugin

**p13 css兼容性处理**
下载 库
postcss-loader
postcss-preset-env
有时报错需要回退 npm i postcss-loader@3.0.0 -D

**p14 压缩css**
下载插件
optimize-css-assets-webpack-plugin

**p14 js语法检查**
下载
eslint-loader
eslint
eslint-config-airbnb-base
eslint-plugin-import
还要配置 package.json文件
"eslintConfig":{
    "extends": "airbnb-base"
  }

**p14 js兼容性处理**
下载
babel-loader
@babel/core
@babel/preset-env
core-js
基本js兼容处理 @babel/preset-env
全部js兼容处理( 直接在js引入即可 ) @babel/polyfill
最优解
按需下载 core-js

**p20 HMR 模块热更新**
devServer : {
...
hot: true;
}
入口文件中
if (module.hot) {
    // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效
    module.hot.accept(\'./print.js\', function() {
      // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。
      // 会执行后面的回调函数
      print();
    });
  }