Webpack配置文件

参考：webpack配置详解
参考：一文搞懂｜webpack的安装和配置文件
参考：webpack | 中文文档
参考：webpack4系列笔记之（5）sourcemap的配置
参考：webpack配置完全指南

Webpack – 是一个静态的模块化打包工具，为现代的JavaScript应用程序

• 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具

• 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；

• 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；

• 现代的modern：正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

Webpack的运行是依赖Node环境的

webpack配置文件的基本结构

• 当使用webpack打包的时候，webpack会自动去项目根目录下寻找webpack.config.js这个配置文件，加载里面的配置，根据配置选项进行打包

module.exports = {
 entry: "./src/index.js", //打包⼊⼝⽂件
 output: "./dist", //输出结构
 mode: "production", //打包环境 值有 production development none
 module: {
 rules: [
 //loader模块处理
   {
     test: /\.css$/,
     use: "style-loader"
    }
  ]
 },
 plugins: [new HtmlWebpackPlugin()], //插件配置
 resolve: {
	alias: {
		"@": ""
	}
 },
 devServer: {
	proxy: {
		'api': {
			target: "",
			changeOrigin: true,
			pathRewrite: {'^api': ''} // 根据后端(代理)接口需求
		}
	}
 }
};
// 原文链接：https://blog.csdn.net/Kotoba209_/article/details/117155284

1、entry – 指定项目的入口文件

• 指定webpack打包入口文件： webpack执行构建的第一步将从entry开始。
• SPA单页面应用的 entry值是一个字符串，即项目入口文件
  • 多页面应用的entry是一个对象，包含多个入口

2、output – 打包转换后的文件输出位置

filename

path — 对应一个绝对路径。

• string = path.join(process.cwd(), ‘dist’)

const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
  },
};

3、mode – 用来指定当前的构建环境

• ‘none’ | ‘development’ | ‘(默认)production’

• 设置 process.env.NODE_ENV

• 如果要根据 webpack.config.js 中的 mode 变量更改打包行为，则必须将配置导出为函数，而不是导出对象：

var config = {
  entry: './app.js',
  //...
};

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    //...
  }

  return config;
};

4、module

• 在webpack里 一切皆模块，一个模块对应着一个文件，webpack会从配置的entry开始递归找出所有依赖的模块。
• 当webpack处理到不认识的模块时，需要在webpack中的module对象里进行配置，当检测到是什么格式的模块，需要使用到什么loader来处理。

rules — 数组， 包含多个rule

rule.test

rule.use

loader — 模块解析器 转换器

• webpack默认只支持.json和.js模块 不支持 不认识其他格式的模块
• 项目里面包含其他模块文件 (.css，,jsx) 会需要用到loader来做转换
  • loader执行顺序 从右到左，从下到上，⼀个loader只处理⼀件事情。

module: {
  rules: [
    {
      test: '/\.jsx$/', // 指定匹配规则
      use: 'xxx-loder', // 用什么loader来处理
    },
    {
      test: '/\.css$/', // 指定匹配规则
      use: 'xxx-loder', // 用什么loader来处理
    }
  ]
}

常见loader

• style-loader
• css-loader
• less-loader
• sass-loader
• ts-loader
• babel-loader
• file-loader
• eslint-loader
• …

5、plugins

• 作用于webpack打包整个过程，webpack的打包过程是有（生命周期概念）钩子的。plugin可以便在webpack运行到某个阶段的时候，帮你做一些事情。
• plugin 扩展插件，在webpack构建流程中的特定时机注入拓展逻辑来改变构建结果或者你想要做的事情。作用于整个构建过程。

常见 plugin

• HtmlWebpackPlugin
  • HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js模块引入到该html中。
  • npm install --save-dev html-webpack-plugin
  • 配置项
    • title：⽤来指定 生成⻚⾯的 title 元素
    • filename：输出的 HTML ⽂件名，默认是 index.html
    • template：模板⽂件路径
    • …

// 可配置信息
title: ⽤来⽣成⻚⾯的 title 元素

filename: 输出的 HTML ⽂件名，默认是 index.html, 也可以直接配置带有⼦⽬录。

template: 模板⽂件路径，⽀持加载器，⽐如html!./index.html

inject: true | 'head' | 'body' | false ,注⼊所有的资源到特定的 template 或者 templateContent 中，如果设置为
true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。

favicon: 添加特定的 favicon 路径到输出的 HTML ⽂件中。

minify: {} | false , 传递 html-minifier 选项给 minify输出

hash: true | false, 如果为 true, 将添加⼀个唯⼀的

webpack 编译 hash 到所有包含的脚本和 CSS ⽂件，对于解除cache 很有⽤。

cache: true | false，如果为 true, 这是默认值，仅仅在⽂件修改之后才会发布⽂件。

showErrors: true | false, 如果为 true, 这是默认值，错误信息会写⼊到 HTML ⻚⾯中

chunks: 允许只添加某些块 (⽐如，仅仅 unit test 块)

chunksSortMode: 允许控制块在添加到⻚⾯之前的排序⽅式，⽀持的值：'none' | 'default' | {function}-default:'auto'

excludeChunks: 允许跳过某些块，(⽐如，跳过单元测试的块)


// 使用
const htmlWebpackPlugin = require("html-webpackplugin");

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

• mini-css-extract-plugin
  • 生成单独的css文件

6、resolve解析

resolve.alias — 设置别名

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

7、devServer

devServer.open

• 布尔值

• 告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以打开你的默认浏览器。

• 或者在 package.json的 scripts命令中配置 “--open”

devServer.port – 指定监听请求的端口号

• 指定监听请求的端口号

devServer.proxy

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

devServer.compress

• compress: true
  • 可以设定是否为静态资源开启Gzip压缩

8、devTool – 此选项控制是否生成、以及如何生成 source map。

• 选择一种 source map 风格来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

• 可选值：
  • eval： 生成代码 每个模块都被eval执行，并且存在@sourceURL
  • cheap-eval-source-map： 转换代码（行内） 每个模块被eval执行，并且sourcemap作为eval的一个dataurl
  • cheap-module-eval-source-map： 原始代码（只有行内） 同样道理，但是更高的质量和更低的性能
  • eval-source-map： 原始代码 同样道理，但是最高的质量和最低的性能
  • cheap-source-map： 转换代码（行内） 生成的sourcemap没有列映射，从loaders生成的sourcemap没有被使用
  • cheap-module-source-map： 原始代码（只有行内） 与上面一样除了每行特点的从loader中进行映射
  • source-map： 原始代码 最好的sourcemap质量有完整的结果，但是会很慢

---

• 策略为：
  • 使用 cheap 模式可以大幅提高 souremap 生成的效率。 没有列信息（会映射到转换后的代码，而不是映射到原始代码），通常我们调试并不关心列信息，而且就算 source map 没有列，有些浏览器引擎（例如 v8） 也会给出列信息。
  • 使用 eval 方式可大幅提高持续构建效率。 参考官方文档提供的速度对比表格可以看到 eval 模式的编译速度很快。
  • 使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。

---

• 生产环境：默认为 null ，一般不设置（ none ）或 nosources-source-map
• 开发环境：默认为 eval ，一般设置为 eval 、 cheap-eval-source-map 、cheap-module-eval-source-map

9、performance