webpack.config 参数整理

webpack是一个模块打包器，作用是将web工程的入口文件进行打包，打包后的文件用于浏览器中使用。它会根据模块的依赖关系进行静态文件分析，生成bundle.js。下文会介绍webpack的入口文件的配置：

如下是个最简单的配置出入口文件示例：

const path = require('path');
const webpackHtmlPlugin = require(webpack-html-plugin);

module.export = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    pathname: path.resolve(__dirname, 'dist') 
  },
  plugins: [
    new webpackHtmlPlugin(),
  ],
  mode: 'development'
}

入口文件有三种情况：

1. string (即指定js入口文件，打包后形成1个chunk ，输出1个bundle文件 此时，chunk名称默认为main)

2. array ['src/index.js', src/main.js]

entry: ['src/index.js', 'src/main.js']
// 多入口，所有入口文件最终只会形成一个chunk，输出只有一个bundle文件

3.object

有几个入口文件，即会行成几个chunk，chunk文件名称是key值
entry: {
  index: 'src/index.js', // chunk名称为index
  main: 'src/main.js', // chunk名称为main
}

出口文件配置

output：{
  filename: 'js/[name].js', // 文件名称（指定名称+目录） 
  path: resolve(__dirname, 'build'), // 输出文件目录
  publicPath: '/', // 所有资源的公共路径的前缀。
  chunkFilename: '[name]_[hash]chunk.js', // 如果该字段为空，则默认遵守filename命名规则
  // 非入口chunk的名称，非入口chunk指的是通过按需加载或者懒加载引入的代码块
  library: '[name]', // 整个打包好的文件向外暴露的变量名
  libraryTarget: 'window', // 变量名挂到浏览器上
  libraryTarget: 'global' // 变量名添加到node环境
  // 如果传入数组，则只有最后一项有效
}

resolve配置

const path = require('path');
module.export = {
  resolve: {
    alias: { // 解析模块路径别名
      component: path.resolve(__dirname, 'src/component'),
      container: path.resolve(__dirname, 'src/container')
    },
    // 配置省略文件路径的后缀名
    extensions: ['js', 'css'],
    modules: [node_modules], 
    // 默认是node_modules, 如果当前层级下找不到node_modules，则会去上级目  录查找。
    // 如果webpack.config.js是在依赖包(node_modules)的下级目录,则需要配置[path.resolve(__dirname, '../node_modules', 'node_modules')]
    // 第二个node_modules可写可不写
  }
}