[TOC]

webpack.config.js 配置文件
webpack的配置文件是遵循Node.js的CommonJS模块规范的：

  • 通过require()语法导入其他文件或者使用Node.js内置的模块
  • 普通的Javascript编写语法 ```javascript const path = require(‘path’);//使用require引入Node.js内置的path模块

//使用module.exports将webpack的配置导出 module.exports = { mode:’development’, entry:’./index.js’, output:{ path:path.resolve(__dirname,’dist’), filename:’index.bundle.js’ } }


webpack不仅仅支持**js**配置，还支持**ts(typeScript)**，**CoffeeScript**甚至**JSX**语法的配置，不同语言核心配置项都不变，只不过是语法不同而已。Webpack的配置类型支持**对象**、**函数**、**Promise**和**多配置数组**。

**函数类型的Webpack配置**（接受两个参数env[环境对象]和argv[Webpack-CLI的命令行选项] ）
```javascript
module.exports = (env,argv) =>{
    return {
      mode: env.production? 'production' : 'development',
    devtool: env.production? 'source-maps': 'eval',
    pluginis: [
        new TerserPlugin({
          terserOptions: {
            compress:argv['optimize-minimize']
        }
      })
    ]
  }
}

Promise类型的Webpack配置【适合需要异步加载一些Webpack配置的变量】

module.exports = () =>{
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve({
          entry:'./app.js',
        /*...*/
      })
    },3000)
  })
}

多配置数组【多次打包中有一些通用的配置，将两次以上的Webpack配置以数组的形式导出】

module.exports = [
  {
      mode:'production',
    //配置1
  },
  {
      //配置2
  }
]

配置的使用
默认情况，Webpack会查找执行目录下面的webpack.config.js作为配置，如果需要指定某个配置文件，可以使用：webpack —config webpack.config.js 命令
如果webpack不是全局安装，则可以在项目目录下执行：
node ./node_modules/webpack/bin/webpack —config webpack.config.js
或使用npx
npx webpack —config webpack.config.js

Webpack 常见名词解释
entry: 项目入口
module: 每一个文件都可以看做module
chunk: 代码块，一个chunk可以由多个模块组成
loader: 模块转化器，模块的处理器，对模块进行转换处理
plugin: 插件扩展，插件可以处理chunk，也可以对最后的打包结果进行处理，可以完成loader完不成的任务
bundle:最终打包完成的文件，一般就是和chunk一一对应的关系，bundle就是对chunk进行压缩打包处理后的产出

mode 模式
Webpack4.0 开始引入mode配置，通过配置mode=development或者mode=production来制定是开发环境打包，还是生产环境打包
可以在命令行中设置mode:
npx webpack —config webpack.config.entry.js —mode development

Webpack是一个模块打包工具，能够从一个需要处理的Javascript文件开始，构架一个依赖关系图（dependency graph）,该图映射到了项目中每一个模块，然后将这个依赖关系图输出到一个或者多个bundle中

context(上下文)
context即项目打包的相对路径上下文，如果指定了context=”/User/test/webpack”，那么我们设置的entry和output的相对路径都是相对于/User/test/webpack的，包括Javascript中引入模块也是从这个路径开始的。context的值必须是一个绝对路径。

module.exports = {
    context: '/User/test/webpack'//context在实际开发中不需要配置，默认为工作目录
}

entry入口
webpack的entry支持多种类型（字符串，对象，数组），两种方式（单文件入口，多文件入口）
单文件入口：单文件入口可以快速创建只有单一文件入口的情况，例如library的封装

module.exports = {
    entry:'path/to/my/entry/file.js'
}
//或使用对象的方式
module.exports = {
    entry: {
      main: 'path/to/my/entry/file.js'//直接把指定的文件作为入口模块
  }
}
/**
*可以传入包换文件路径的数组，当entry为数组时，会合并输出。如果使用数组，webpack会自动生成另外
*一个入口模块，并将数组中每个元素指定的模块加载进来,并将最后一个模块的module.exports作为模块的
*module.exports导出
**/
moduel.exports = {
    mode: 'developemnt',
  entry: ['./src/app.js','./src/home.js'],
  output: {
      filename: 'array.js'
  }
}

多文件入口：使用对象的语法来支持多个entry，多文件入口的对象语法相对于单文件入口，具有较高灵活性

/**
* 将entry分成3个独立的入口文件，这样会打包出来三个对应的bundle
**/
module.exports = {
    entry: {
      home: 'path/to/my/entry/home.js',
    search: 'path/to/my/entry/search.js',
    list: 'path/to/my/entry/list.js'
  }
}

Output输出
output指定了entry对应文件编译打包之后的输出bundle。（如果不指定output，则默认输出到dist/main.js，output.path是dist，output.filename 是main）一个webpack的配置，可以包含多个entry，但是只能有一个output。
常用属性：

  • path: 指定bundle存放的路径，比如dist，output等
  • filename: 这个是bundle的名称
  • publicPath: 指定了一个在浏览器中被引用的URL地址
    module.exports = {
  entry: {
    home: 'path/to/my/entry/home.js',
  search: 'path/to/my/entry/search.js',
  list: 'path/to/my/entry/list'
},
output: {
    filename:'[name].js',//使用[name]占位符，对应的key为：home,search,list
  path:__dirname+'/dist'
}
}
    输出结果为：
    path/to/my/entry/home.js------>dist/home.js
path/to/my/entry/search.js------>dist/search.js
path/to/my/entry/list.js------>dist/list.js
    Webpack目前支持的占位符：
    [hash] 模块标识符的hash，是整个项目的hash值，根据每次编译内容计算得到，每次编译之后都会生成新的hash，即修改任何文件都会导致所有文件的hash发生改变；在一个项目中，虽然入口不同，但是hash是相同的。
    [chunkhash] chunk内容的hash，根据不同的入口文件进行依赖文件解析，构建对应的chunk，生成相对应的hash，只要组成entry模块的文件没有变化，则对应的hash也是不变的。使用chunkhash存在一个问题，当在一个js中引入了CSS文件，编译后他们的hash是相同的，而且，只要js文件内容发生变化，与其相关联的CSS文件hash也会变，针对这种情况，可以把CSS从JS中使用mini-css-extract-plugin或extract-text-webpack-plugin抽离出来并使用contenthash处理
    [name] 模块名称
    [id] 模块标识符
    [query] 模块的query，例如，文件名？后面的字符串
    [function] 一个return出一个string作为filename的函数

output.publicPath
对于使用