webpack系统学习（二） webpack基础配置项

webpack具有相当多的配置项，常见且基础的配置项如entry，output，mode，plugins等等，这篇博客是笔者关于这些基础配置的知识整理。

1. entry

起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。

module.exports = {
   
  // entry: './src/js/hello.js',
  entry: {
   
   main: './src/js/hello.js'
  }
}

2. output

output 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。
output具有相当多的配置项，这里仅仅介绍filename，path等一些基础配置，更多详情可以前往webpack文档查看

2.1 output.path

output 目录对应一个绝对路径。

module.exports = {
   
  //...
  output: {
   
    path: path.resolve(__dirname, 'dist/assets')
  }
};

打包后的文件将会输出到指定的文件夹下面。

2.2 output.filename

此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。
对于单个入口起点，filename 会是一个静态名称。

//webpack.config.js

module.exports = {
   
  //...
  output: {
   
    filename: 'bundle.js'
  }
};

然而，当通过多个入口起点(entry point)、代码拆分(code splitting)或各种插件(plugin)创建多个 bundle，应该使用placeholder为每一个bundle提供一个唯一的名称，如：

module.exports = {
   
  //...
  output: {
   
    filename: '[name].bundle.js'
  }
};

3. module

module选项决定了如何处理项目中不同类型的模块。
module具有两个配置项，noParse和rules

3.1 module.noParse

防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制。忽略大型的 library 可以提高构建性能。

module.exports = {
   
  //...
  module: {
   
    noParse: /jquery|lodash