5.webpack配置简介-入门集
简介：webpack的六个核心概念
- Entry 入口
- Output 输出
- Module 模块
- Chunk 代码块
- Loader 转译
- Plugin 插件
如果对webpack不了解,建议按照下面的四篇文件写敲一遍代码，感受一下，对webpack有个基本的感觉，再了解一下以下的配置，我觉得基本就入门了。
1.超简单的webpack入门demo
2.webpack入门使用loader处理css
3. webpage4.0 mini-css-extract-plugin插件简单介绍
4. webpack4.0 热跟新webpack-dev-server的使用
正文
- Entry参数
entry:'./app.js', // {1}
//字符串
entry: ['./app1.js', './app2.js'] // {2}
//数组
{1} {2}的效果一致，输出都是一个文件，区别是可以有多个入口
entry: {
a:'./app1.js',
b:['./app1.js', './app2.js']
}
对象，安装对象的key生成多个生成多个代码块
2.Output 输出文件
每个生成个文件都会调用一次Output
2.1 filename
*当生成多文件的时候filename的值不可以写死，写死的话会覆盖上一次生成的文件
filename 会传入id（从0开始的代码块标识）、name(代码块的名称)、hash、chunkhash
示例代码
filename:'[name].js'
// 或者
filename:'bundle.js'
2.2 path
输出文件存放的本地位置
示例
path: path.resolve(dirname , 'dist')
- Module
3.1 rules规则配置loader
rules: 配置模块的读取和解析
-
条件规则 test、include、exclude
--text--->正则匹配，示例：text:/\.js$/, ===>匹配以js结尾的文件
--include--->只匹配指定目录，
示例：
include: path.resolve(dirname, 'src')、
[path.resolve(dirname, 'src'), path.resolve(dirname, 'test')], ===>该规则对src下的目录生效
--exclude--->不匹配目录，
示例：
exclude: path.resolve(dirname, 'node_modules')、
[path.resolve(dirname, 'node_modules'), path.resolve(dirname, 'bower_modules')], ===>该规则排除node_modules -
应用规则 通过
use来配置应用的loader,可以传多个，传入的loader需要提前安装好
--use, 示例
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
3.2 noParse 不编译文件
noParse: /jquery|chartjs/
// 或则
noParse: content => /jquery|chartjs/.test(content)
3.3 Resolve
-alias 引入路径别成
resolve:{ alias : { com: 'src/component’, 'mm$': path.resolve(__dirname, '../media/'), } }
起到的效果是 import Button from 'Button'相当于import Button from 'src/component/Button'
$ 是命中以mm结尾的文件引用
-
mainFields指定文件引用及应用顺序, mainFields的默认值为['browser', 'main']
resolve:{
mainFields: ['browser', 'main']
} - 第一点: 指定文件引用，即指定项目的入口文件，如
package.json一般会提供 "main": "index.js"的配置，如果不提供会查找 "main": "index.js"。 - 第二点: 指定顺序，记住
webpack都是从右到左的顺序。
- 这点很有用，尤其在提供多包的第三方插件库时。
- Plugin 插件
plugins:[
new MiniCssExtractPlugin(
{
filename: `[name].css`
}
)
]
使用Plugins的配置项是学习webpack的难点，要积累、要查资料
- DevServer
- 示例代码
```
devServer: {
contentBase: path.join(__dirname, "dist"), // 默认值就是项目根目录
hot: true, // 热更新
inline:true, //自动更新
host: 'localhost',
port: 8081,
open: true // 是否打开浏览器
}
```
这个选项不做过多介绍
- Devtool
devtool:'source-map'
