webpack基础（二）核心配置

entry —— 可字符串，可对象，可数组

打包入口 （spa【单页面应用 / 单入口】， mpa【多页面应用 / 利于seo】）

output

占位符： [name], —— 名字

[hash] —— 类似时间戳，利于缓存 [hash:6]的形式限制位数 （内容发生变化，hash就变化）

[chunkhash]

例：

const path = require('path')
module.exports = {
  // 入口
      entry: { // 多入口
    index: './src/index.js',
    other: './src/a.js'
  },
  // 模式
  mode: 'development',
  // 出口
  output: {
    // 输出资源的存放位置 必须绝对路径
    path: path.resolve(__dirname, './build'),
    filename: '[name].js'  // 占位符 [name] 对应上面的index和other
    // filename: '[name]-[hash:6].js'  // 占位符 [name] 对应上面的index和other
  },
}
           

mode —— none，development，production（默认）三种模式

开发阶段的开启会有利于热更新的处理，识别哪个模块变化

⽣产阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能

loader —— （模块转换器、模块处理器）对文件加载转换处理，默认仅支持 .js .json模块，其他模块需要引入插件，如将scss转化为css等

例：安装css-loader（对引入css进行处理）,style-loader（把 CSS 插入到 DOM 中）

npm install --save-dev css-loader
npm install --save-dev style-loader
           

webpack.config.js配置

// 多个loader的执行顺序，先执行后面的loader（css-loader），再执行前面的（style-loader）module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
           

plugin —— 插件(webpack的功能拓展)；基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

例：安装

npm install html-webpack-plugin -D // 自动生成html文档
npm install clear-webpack-plugin -D   // 删除冗杂文件
           

配置

const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') 
module.exports = {
    ...
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/index.html", // 生成html的模板
            filename: "kp.html" // 生成html的文件名
          }),
          new CleanWebpackPlugin ()
      ]
}
           

概念问题：

问：chunk，bundle，module的区别？

答：

chunk

代码片段（webpack转化后的代码片段）

module

模块

bundle

输出的资源文件就叫 bundle文件

一个chunks可以对应一个或多个模块

一个bundle对应一个chunks