webpack配置文件：webpack.config.js

1、webpack的配置文件webpack.config.js

module.exports = {
    entry:'./src/script/main.js',
    output:{
        path:'./dist/js',
        filename:'bundle.js'
    }
}

上面代码是一个最最基本的webpac配置文件，entry是指定要打包的入口文件，output指定打包之后文件的路径和文件名。
(其中几个目录请手动新建：src是放我们源码的文件夹，dist是放我们编译后文件的文件夹。)

有了基本的webpack.config.js，我们用webpack来打包就简单了，可以直接执行下面命令：

webpack

webpack默认就会去寻找根目录下的webpack.config.js文件。

打包成功，dist/js文件夹下就会生成一个bundle.js。

2、我们也可以指定webpack的配置文件名

webpack.config.js是webpack默认的配置文件名，如果我们有一个webpack.dev.config.js配置，又如何让webpack来读取它呢？
只需要在执行打包命令的时候，加一个参数：

webpack --config `webpack.dev.config.js

3、webpack配合npm

还记得我们在npm init初始化之后，生成了一个package.json文件么？我们现在终于要用到它了。
我们在这个文件中，增加一个scripts

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js"
  },

上面我们增加了一个webpack项，我们可以看出其值其实也是执行的webpack命令。

既然我们是要webpack和npm配合，那么上面的配置到底有什么作用呢？
我们可以通过npm来调用webpack来，执行下面命令，同样完成webpack打包操作：

npm run webpack

npm run xxxx，其中xxxx就是我们上面配增加的scripts命令。

4、webpack配置的entry

entry是webpack打包的入口指示。

它有三种形式：

1)、最简单的就是一个string，也是只有一个入口文件。我们前面已经见识了。

entry:'./src/script/main.js',

这种形式，你的所有的依赖，都在这个文件main.js中引入进来。

2)、数组的形式

entry:['./entry1','./entry2']

3)、对象的形式

entry: {
  page1:'./page1',
  page2:['./entry1','./entry2']
}

2个入口。

5、webpack配置的output

我们先来回顾一下，我们在执行webpack打包命令之后，终端会输出：

Hash: 0bd4f09244f0e8c60354
Version: webpack 2.2.1
Time: 57ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.51 kB       0  [emitted]  main
   [0] ./src/script/main.js 0 bytes {0} [built]

然后我们把webpack.config.js中output段修改如下：

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

这样我们打包之后的文件就是main-本次打包的hash值.js。

还可以：

filename:'[name]-[chunkhash].js'

这其中的hash值，我们可以认为是版本号，也就是说，只有在我们的文件改变了的时候，这个hash值才会有变化。