持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
核心概念
入口(entry)
默认值是 ./src/index.js
自定义配置修改示例：
module.exports = {
entry: './path/to/my/entry/file.js',
};
输出(output)
主js默认值是 ./dist/main.js
其他文件默认放在./dist
自定义配置修改示例：
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};
加载器loader
属性
- test 属性，识别出哪些文件会被转换。
- use 属性，定义出在进行转换时，应该使用哪个 loader。
加载器是程序运行过程中做的一些判断，你可以将test理解成if条件语句，use理解成if条件语句后跟随的代码指令。test和use配合使用告诉打包器遇到某某情形应当用什么loader进行转换。
这里给出一些举例帮助大家更好的理解
加载 CSS
为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader，操作如下：
npm install --save-dev style-loader css-loader
加载图片
使用 file-loader，可以将这些内容混合到 CSS 中，操作如下：
npm install --save-dev file-loader
加载字体
同样使用file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。其实我们可以将它们用于任何类型的文件，包括字体。
加载其他文件
此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。
要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader，操作如下：
npm install --save-dev csv-loader xml-loader
多语言支持
通过 loader 可以使 webpack 支持多种语言和预处理器语法编写的模块
插件(plugin)
require() 在plugins下配置插件列表，webpack有很多插件可供使用，详情可参见插件列表
模式(mode)
- 默认值为 production：为模块和 chunk 启用确定性的混淆名称，
- development：为模块和 chunk 启用有效的名。
- none：会将 DefinePlugin 中 process.env.NODE_ENV设置为对应的mode
浏览器兼容性(browser compatibility)
Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本），当然ie都要退出历史舞台了，新项目应该不会有这方面的顾虑。
环境(environment)
Node.js v10.13.0+
配置
在实际开发过程中，我们需要根据不同的环境给出不同的webpack配置
模块
导入方式
- ES2015 import 语句
- CommonJS require() 语句
- AMD define 和 require 语句
- css/sass/less 文件中的 @import 语句。
- stylesheet url(...) 或者 HTML
<img src=...>文件中的图片链接
支持类型
- ECMAScript 模块
- CommonJS 模块
- AMD 模块
- Assets
- WebAssembly 模块
模块解析
- 路径解析
- 解析loader
- 缓存 在 watch 模式 下，只有修改过的文件会被从缓存中移出，如果关闭 watch 模式，则会在每次编译前清理缓存。
