webpack(基于webpack4)这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战 web

这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

webpack is a module bundler(模块打包⼯工具) Webpack是⼀一个打包模块化JavaScript的⼯工具，它会从⼊入⼝口模块出发，识别出源码中的模块化导⼊入语句句，递归地找出⼊入⼝口⽂文件的所有依赖，将⼊入⼝口和其所有的依赖打包到⼀一个单独的⽂文件中

基本概念

chunk 代码块。一个代码块可以由多个模块组成，一个入口是一个chunk，一个chunk可能有很多依赖
bundle 资源文件一个chunk对应一个bundle
webpack 默认只支持j s,json文件
loader 执行顺序是从右到左，从下到上

安装

npm install -D webpack
#安装webpack4 需要额外安装webpack-cli
npm install -D webpack-cli

执行构建

npx webpack

webpack.config.js

默认配置

const path = require("path");
module.exports = {
    // 必填  webpack执⾏行行构建⼊入⼝口
    entry: "./src/index.js",
    output: {
        //将所有依赖的模块合并输出到main.js
        filename: "main.js",
        //输出⽂文件的存放路路径，必须是绝对路路径
        path: path.resolve(__dirname, "./dist")
    }
};

entry

值有三种：字符串，数组，对象形式

对象形式可以实现多入口功能，多入口对应着多出口，文件名称用占位符[name].js 数组：不能解决多入口问题，只是拼接成一个j s

占位符问题：

hash :整个项目的hash值，每构建一次就会有一个hash，只要有项目文件改变，hash就会变
chunkhash:根据不同入口（entry）进行依赖解析，构建对应的chunk,生成相应的hash,只有组成entry的模块没有内容变化，则对应的hash不变，很好的利用了浏览器缓存

(补充：相对于多入口而言（entry对象形式），不同入口文件及他们的依赖文件是有不同的chunkhash的，当其中一个依赖文件修改的时候，打包后，依赖于这个依赖文件的入口文件chunkhash变化，这个入口文件依赖的其他文件chunkhash也会变化，没有依赖关系的chunkhash不变)

contenthash：和单个文件的内容有关，指定文件的内容发生改变，就会改变contenthash

（上面chunkhash问题：当css配置文件名为chunkhash的时候，js文件变化，这个文件引入了css文件，则打包后该css文件的chunkhash也会变化，所以css文件的名称不能用chunkhash，用contenthash，根据文件内容决定hash是否变化，不取决于依赖文件）

name
id

[name]-[hash:6].js 表示ha sh长度为6位，多长20位

mode

构建模式 none production development

production 代码会压缩，进行一些优化 development 代码不会被压缩

dev-tool

source-map 文档中

loader

配置打包css

css-loader 把css模块内容放到j s模块中去
s tyle-loader 从j s中提取c s s,在html中创建style标签，把css内容放到该标签中去

 {
                test:/.css$/,
                //注意前后顺序，执行的时候，是先执行css-loader 再执行style-loader
                use:["style-loader","css-loader"]
            }