Webpack是 JS 静态打包神器，通过内部组件进行一系列操作，对前端代码进行替换、转义、JS浏览器兼容性等处理，最终生成前端应用所需文件包括 Html、JS和 CSS。Webpack主要以下几部分组成，这些配置都可以定义在webpack.config.js，loaders 和 plugins 需要npm install 进行安装。
-
Entry：入口文件定义，通过入口文件最终生成应用的依赖关系，从而确定项目所需要打包的文件。
module.exports = {
entry: './path/to/my/entry/file.js',
}; -
Output：结果文件，根据从入口生成的依赖关系，最终打包成结果文件，这个文件最终会被引用到 html 文件中。
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',
},
}; -
Loaders：原生的webpack 只认识 JS 文件，如果想用其他格式的文件，就需要的通过 loader 文件进行转换，例如 vue、css 等。点击可以查看官方支持的 loader 列表：
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},};
4.Plugins：loaders 可以转换文件，plugins 比 loaders 更强大，通过Tapable类库，采用添加 hook的方式对 webpack 最终生成的代码进行增强, 例如 compile、run 阶段的 hook。查看官方支持的插件列表
const HtmlWebpackPlugin = require('html-webpack-plugin');const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
5.Mode：支持 production、development，这样可以对不同的环境进行不同的打包处理，例如，在 development 时候不需要混淆 JS
module.exports = {
mode: 'production',
};
6.Browser Compatibility: webpack默认支持版本高于 IE8 的浏览器，这个足够用了，现在 IE 已经淘汰了，出了特殊需要。生产环境不需要。
webpack 例子
这部分，我们做一个简单的webpack例子，主要看看 loaders，plugins都是怎么用的，首先创建有个 webpack 的项目：
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
在 JS 中使用 css，需要通过 loader 将 css载入到我们应用当中，安装 Loader
npm install --save-dev style-loader css-loader
把对应入口文件和和 html 创建好
index.js
import './index.css';
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = 'hello';
element.classList.add('test');
return element;
}
document.body.appendChild(component());
index.html 文件放到 dist 目录下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
index.css
.test{
width: 100px;
height: 100px;
margin: 10px;
background-color: aliceblue;
border-radius: 50%;
}
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
命令行执行 npx webpack，通过浏览器查看结果：
添加 HtmlWebpackPlugin，这个插件的作用是自动生成 html 文件，首先安装plugins
npm install --save-dev html-webpack-plugin
修改配置文件，引入并添加配置插件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [new HtmlWebpackPlugin()],
};
执行 npx webpack，之前的 index.html 会被覆盖，这个插件主要的作用是如果输出文件名有变化例如添加 hash，这是就要去修改引入 JS。
Webpack 功能很多，都是通过 loader 和 plugin 的方式实现的，可以参考官方文档。