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的使用

正文

1. 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')

3. 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都是从右到左的顺序。

• 这点很有用，尤其在提供多包的第三方插件库时。

4. Plugin 插件

  plugins:[
      new MiniCssExtractPlugin(
          {
              filename: `[name].css`
          }
      )
  ]

使用Plugins的配置项是学习webpack的难点，要积累、要查资料

5. DevServer

- 示例代码
```
devServer: {
    contentBase: path.join(__dirname, "dist"), // 默认值就是项目根目录
    hot: true, // 热更新
    inline:true, //自动更新 
    host: 'localhost',
    port: 8081,
    open: true // 是否打开浏览器
}
```
这个选项不做过多介绍

6. Devtool

devtool:'source-map'

上一篇 4. webpack4.0 热跟新webpack-dev-server的使用