核心

1. Entry

Entry 用来指定 webpack 的打包入口，对于非代码比如图片、字体依赖也会不断加入到依赖图中。

Entry 的用法

单入口：entry 是一个字符串

module.exports = {
	entry:'./path/to/my/entry/files.js'
}

1
2
3

多入口：entry 是一个对象

module.exports = {
	entry:{
  	app:'./src/app.js',
    adminApp:'./src/adminApp.js'
  }
}

1
2
3
4
5
6

2. Output

Output 用来告诉 webpack 如何将编译后的文件输出到磁盘

Output 的用法

单入口

module.exports = {
    mode: 'production',
    entry: {
        app: './src/index.js',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
}

1
2
3
4
5
6
7
8
9
10

多入口

module.exports = {
    mode: 'production',
    entry: {
        app: './src/index.js',
        app1: './src/index2.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js' // 通过占位符确保文件名称的唯一
    },
}

1
2
3
4
5
6
7
8
9
10
11

3. Loaders

webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loader 去支持其他文件类型并且把它们转换为有效的模块，并且可以添加到依赖图中。

本身是一个函数，接受源文件作为参数，返回转换的结果。

常见的 Loaders 有哪些？

名称	描述
babel-loader	转换 ES6、ES7 等 JS 新特性语法
css-loader	支持 css 文件的加载和解析
less-loader	将 less 文件转换成 css
ts-loader	将 ts 转换成 JS
file-loader	进行图片、字体等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包 JS 和 CSS

loader 用法

做一个 raw-loader 例子，可让您的文件作为字符串导入

npm install --save-dev raw-loader

module: {
  rules: [
    {
      test: /.\txt$/, // test指向匹配规则
      use: 'raw-loader' // use指定使用的loader名称
    }
  ]
}

1
2
3
4
5
6
7
8

4. Plugins

插件用于 bundle 文件的优化，资源管理和环境变量注入

作用于整个构建过程

常见的 Plugins 有哪些？

名称	描述
CommonsChunkPlugin	将 chunks 相同的模块代码提取成公共 js
CleanWebpackPlugin	清理构建目录
EctractTextWebpackPlugin	将 css 从 bunlde 文件中提取成为一个独立的 css 文件
CopyWebpackPlugin	将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建 html 文件去承载输出的 bundle
UglifyjsWebpackPlugin	压缩 js
ZipWebpackPlugin	将打包出的资源生成一个 zip 包

Plugins 用法

这里做一个 HtmlWebpackPlugin 的例子

安装插件

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

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入关于html的插件

plugins:[
  new HtmlWebpackPlugin({ // 放入plugin数组里
    template:'./html/index.html'
  })
]

1
2
3
4
5
6
7

5. mode

Mode 用来指定当前的构建环境是：production、development 还是 node

设置 mode 可以使用 webpack 内置的函数，默认值为 production

选项	描述
development	设置 process.env.NODE_ENV 的值为 devlopment . 开启 NamedChunksPlugin 和 NameModulesPlgin
production	设置 process.env.NODE_ENV 的值为 production。开启 FlageDendencyUsagePlugin,FlageIncludeChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin 和 TerserPlugin
none	不开启任何优化选项

核心 #

1. Entry #

Entry 的用法 #

2. Output #

Output 的用法 #

3. Loaders #

常见的 Loaders 有哪些？ #

loader 用法 #

4. Plugins #

常见的 Plugins 有哪些？ #

Plugins 用法 #

5. mode #

核心