webpack简介

Webpack是⼀个打包模块化JavaScript的⼯具，它会从⼊⼝模块出发，识别出源码中的模块化导⼊语句，递归地找出⼊⼝⽂件的所有依赖，将⼊⼝和其所有的依赖打包到⼀个单独的⽂件中，是工程化、自动化思想在前端开发中的体现

webpack安装

1.环境准备

webpack是基于node的打包工具 nodeJs ：nodejs.org/en/

2.安装方式

局部安装

npm init -y # 初始化npm配置⽂件
npm install --save-dev webpack # 安装核⼼库
npm install --save-dev webpack-cli # 安装命令⾏⼯具
安装最新的4.x稳定版本 npm i -D webpack@4.44.0
安装指定版本 npm i -D webpack@

webpack零配置

webpack有默认的配置文件，webpack.config.js，也可以修改文件名

使⽤默认的配置⽂件：webpack.config.js
使⽤⾃定义配置⽂件：⽐如webpackconfig.js，可以通过--config webpackconfig.js来指定

// package-lock.json中配置
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config ./webpackconfig.js"
  },

webpack使⽤哪个配置⽂件来执⾏构建

1.entry

构建入口起点
类型string，array,object。其中string会转化为对象，默认key为main

// 对象 多入口
 entry: {
    index: "./src/index.js",
    a: "./src/a.js",
  },
// 数组 单入口 一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 "chunk" 中时
 entry: ["./src/index.js", "./src/a.js"],
// 字符串 单入口
entry: "./src/index.js"
// 字符串默认转化为
entry: {
    main: "./src/index.js",
},

2.output

配置描述webpack打包的输出配置，包含输出文件的命名、位置等信息。

 output: {
    // 输出的文件存放的目录，必须是绝对路径
    path: path.resolve(__dirname, "./dist"),
    // 输出的文件名称 占位符写法[name],根据入口的key
    filename: "[name].js",
  },

3.mode

model用来指定当前构建环境设置mode可以⾃动触发webpack内置的函数，达到优化的效果

production（默认）⽣产阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能
development 开发阶段的开启会有利于热更新的处理，识别哪个模块变化
none

4.loader：作用于编译过程

模块解析器，由于webpack默认只知道如何处理js和json模块，loader就是负责处理css,图片，或其他格式的模块。

常见loader

style-loader
css-loader
less-loader
sass-loader
ts-loader
babel-loader 转换ES6/7等js新特性语法
file-loader
eslint-loader

5.moudle

模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

当webpack处理到不认识的模块时，需要在webpack中的module处进⾏配置，当检测到是什么格式的模块，使⽤什么loader来处理。

案例样式处理

css-loader 分析css模块之间的关系，并合成⼀个css
Style-loader 会把css-loader⽣成的内容，以style挂载到⻚⾯的heade部分

npm install style-loader css-loader -D

 module: {
    rules: [
      {
        test: /\.css$/,
        // 多个loader情况下，执行顺序是自后往前的
        use: ["style-loader", "css-loader"],
      },
    ],
  },

6.Plugins：作用于打包过程

作用于webpack打包整个过程
扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结果或做你想要的事情。作⽤于整个构建过程

Html-Webpack-Plugin

htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html中

npm install --save-dev html-webpack-plugin

配置

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  ...
  plugins: [
    new htmlWebpackPlugin({
      title: "My App",
      filename: "app.html",
      template: "./src/index.html"
    })
  ]
};

clean-webpack-plugin

默认webpack打包后的dist文件夹下的js文件并不会被自动删除，如果重新打包，会生成新的文件，旧的文件仍然会存在。使用此插件webpack打包后的dist目录中的所有文件将被删除一次。

npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [
new CleanWebpackPlugin()
]

clean-webpack-plugin:如何做到dist⽬录下某个⽂件或⽬录不被清空使⽤配置项:cleanOnceBeforeBuildPatterns

cleanOnceBeforeBuildPatterns: ["/*", "!dll", "!dll/"],

！感叹号相当于exclude 排除，意思是清空操作排除dll⽬录，和dll⽬录下所有⽂件。注意：数组列表⾥的“*/”是默认值，不可忽略，否则不做清空操作。

chunk bundle

chunk 指代码块，一个春款可能由多个模块组合而成，也用于代码合并与分割
bundle 资源经过webpack流程解析编译后最终输出的结果文件
一个chunks可以对应一个或多个模块
一个bundle对应一个chunks

entry: {
    // chunks: index list
    index: "./src/index.js", // 两个模块(chunk)  index a   (index.js引用a.js)
    list: "./src/list.js",
  },

bundle(dis文件下通过入口产生出来相应的js文件)

webpack基础概念