Webpack打包

Webpack是 JS 静态打包神器，通过内部组件进行一系列操作，对前端代码进行替换、转义、JS浏览器兼容性等处理，最终生成前端应用所需文件包括 Html、JS和 CSS。Webpack主要以下几部分组成，这些配置都可以定义在webpack.config.js，loaders 和 plugins 需要npm install 进行安装。

1. Entry：入口文件定义，通过入口文件最终生成应用的依赖关系，从而确定项目所需要打包的文件。

module.exports = {
  entry: './path/to/my/entry/file.js',
};

1
2
3
4

2. 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',
  },
};
1
2
3
4
5
6
7
8
9

3. 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' }],
  },};

1
2
3
4
5
6
7
8
9
10

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' })],
};

1
2
3
4
5
6
7
8
9

5.Mode：支持 production、development，这样可以对不同的环境进行不同的打包处理，例如，在 development 时候不需要混淆 JS

module.exports = {
  mode: 'production',
};

1
2
3
4

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
1
2
3
4

在 JS 中使用 css，需要通过 loader 将 css载入到我们应用当中，安装 Loader

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

把对应入口文件和和 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());
1
2
3
4
5
6
7
8
9
10

index.html 文件放到 dist 目录下












1
2
3
4
5
6
7
8
9
10
11
12
13

index.css
.test{
width: 100px;
height: 100px;
margin: 10px;
background-color: aliceblue;
border-radius: 50%;
}

1
2
3
4
5
6
7
8
9

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'],
},
],
},
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

命令行执行 npx webpack，通过浏览器查看结果：

添加 HtmlWebpackPlugin，这个插件的作用是自动生成 html 文件，首先安装plugins

npm install --save-dev html-webpack-plugin
1

修改配置文件，引入并添加配置插件

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()],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

执行 npx webpack，之前的 index.html 会被覆盖，这个插件主要的作用是如果输出文件名有变化例如添加 hash，这是就要去修改引入 JS。

Webpack 功能很多，都是通过 loader 和 plugin 的方式实现的，可以参考官方文档。