webpack学习篇2

一、建立webpack配置文件

新建一个项目目录如下：

之所以在项目下建立一个webpack.config.js文件是因为如果直接使用webpack这个命令的话webpack会直接在项目的根目录里寻找这个webpack.config.js，把它作为默认的配置去运行。webpack命令后不需要加任何的参数。当然也可以通过--config这个参数来指定其他的配置文件。

webpack --config 指定的配置文件
webpack --config a.js

下面来编写webpack.config.js里的内容:

module.exports = {
  entry: './src/script/main.js',  //表示打包的入口是从哪个文件开始
  output: {  //指明打包以后的文件放在什么地方
      path: './dist/js',
      filename: 'bundle.js'  //打包以后的名字叫什么
  }
}

运行完webpack命令就会打包好一个bundle.js文件放在dist/js目录下，说明配置生效了。
现在想通过webpack直接在命令行里去运行我的配置所加的一些参数，配合npm的一些脚本，npm的package.json里有个属性叫"script"，在这个属性里可以定义一个脚本。可以指定默认的config文件、打包的过程、打包的模块、打包的字是彩色的、打包的原因等等。内容如下图：

二、webpack配置的entry和output

entry
整个webpack打包的一个入口
有三种输入方式：
1、是一个简短的string类型，也就是指定一个入口文件，所有的依赖都在这一个入口文件中指定。

//语法
entry: './src/script/main.js'

2、是一个数组。这种情况其实是webpack为了解决两个平行不相依赖的文件却想打包在一起的这种情况。

//语法
entry: ['./src/script/main.js', './src/script/a.js']

3、是一个对象。分为key和value
key表示chunk name , value表示真实的一个entry
传入一个对象所使用的场景：在多页面应用程序中会用到这种方式。

//语法
entry: {
  main: './src/script/main.js',
  a: './src/script/a.js'
}

output
打包以后的文件放在什么地方，文件叫什么名字

output: {  //指明打包以后的文件放在什么地方
      path: './dist/js',  //打包后文件所在位置
      filename: 'bundle.js'  //打包以后的名字叫什么
  }

注意filename
如果你的entry是一个单入口，是一个简单的字符串路径，定义的filename: 'bundle.js'是一个写死的名称，生成的文件就是bunld.js
如果你的entry是一个多输入，是一个对象，key和value会有多对，多个chunk。这个时候如果filename还是写死的那多个入口文件就会覆盖，只会生成一个bundle.js。所以有多输入的时候不要写死。
可以用一些占位符来保证输出的文件名是惟一的。占位符有三个：
1、[name]：表示chunk的name，也就是entry作为一个对象前面的key。
2、[hash]：每次打包生成的hash。
3、[chunkhash]：每一个chunk自己的hash值。只有当文件发生改变时才会改变。

output: {
  path: './dist/js',
  filename: '[name]-[hash].js'
}