本质上,Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 Webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle
首先初始化参数并进行编译,然后从入口文件开始,调用 loader 对模块进行翻译,组装成一个个包含模块的 chunk,再把 chunk 转换成文件并输出到文件系统中
将所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载
入口起点(entry point)告诉 webpack 哪个是原始文件。找到这个原始文件之后开始寻找依赖包和各种资源,根据这些包还有资源选择合适的 loader 进行处理。这个入口是需要在 webpack 的配置文件(webpack.config.js)中来声明的:
module.exports = {
entry: './path/to/my/entry/file.js'
};
出口(output)即告诉 webpack 经过各种 loader 处理后的文件应该生成到哪个目录下,也就是生成文件所在的地方。同样,需要显示的告诉 webpack 的配置文件(webpack.config.js):
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'
}
}
构建的过程除了处理原生的 JavaScript,还需要处理其他非 JavaScript 文件(图片、CSS、ES6 等)。webpack loader 的作用就是提供一个机制能保证所有的类型资源都可以采用对应的 loader 进行处理,这样 webpack 就能完成更加复杂的构建过程。而这个 loader 也是需要在配置文件(webpack.config.js)中定义:
const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
loader 被用于转换某些资源类型的模块,而插件可以用于执行范围更广的任务。插件的范围包括打包、优化和压缩、重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种任务。
要使用一个插件,需要先 require 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。
const HtmlwebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlwebpackPlugin({ template: './src/index.html' })
]
};
module.exports = config;
我们平时会存在两种状态:开发模式、生产模式
构建的过程中也是需要的,比如在开发环境需要快速的构建,在生产环境需要构建一个最符合线上环境的版本。这样只要在配置文件中(webpack.config.js)简单配置一下就可以完成:
module.exports = {
mode: 'production'
}