webpack基本配置

安装nodejs：http://nodejs.cn/download/
打开命令行，在全局安装webpack：

$npm i webpack -g

切换到自己的目录下新建工程目录并进入:

$mkdir webpack-demo 
$cd webpack-demo

在当前路径安装webpack并初始化项目：

$npm i webpack --save-dev
$npm init

建立一些目录disk，src和初始化文件：index.html，建立配置文件：webpack.config.js，结果是下面这样的：

disk是存放生成打包后的文件的地址，src是本地文件的地址。
在src下新建scripts文件夹保存js文件，新建style文件夹保存css文件。
在scripts文件夹下新建main.js文件。
在webpack.config.js文件中可配置webpack：

module.exports = {
    entry:'./src/scripts/main.js',
    output:{                   
        path:'./dist/js',
        filename:'[name].js',
    },

在命令行运行

$webpack

在dist的js文件夹就会生成一个同名的js文件。

我们也可以在package.json文件中配置webpack，在package.json的scripts属性里加上webpack:

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

这样，我们就可以在命令行运行：

$npm run webpack

来替代webpack命令。

在entry中也可以定义一个数组：

module.exports = {
    entry:['./src/scripts/main.js','./src/scripts/a.js']
    output:{                   
        path:'./dist/js',
        filename:'bundle.js',
    },

在scripts目录下新建a.js文件,在命令行运行

$ npm run webpack

就会将main.js和a.js打包进bundle.js里。

entry还可以定义成一个对象：

entry:{
        main:'./src/scripts/main.js',
        a:'./src/scripts/a.js'
    }

运行npm run webpack得到的结果是跟上面数组行的的entry一样。

在output中的filename有三个值：[name]、[hash]、[chunkhash]，修改output：

module.exports = {
    entry:{
        main:'./src/scripts/main.js',
        a:'./src/scripts/a.js'
    },
    output:{
        path:'./dist/js',
        filename:'[name]-[hash].js'
    }
}

运npm run webpack输出的结果是在dist/js文件夹下生成两个带hash值的main.js和a.js文件。hash值是为了保持文件的唯一性。chunkhash是entry文件对应的hash值。
例如，我们指定chunkhash：

module.exports = {
    entry:{
        main:'./src/scripts/main.js',
        a:'./src/scripts/a.js'
    },
    output:{
        path:'./dist/js',
        filename:'[name]-[chunkhash].js'
    }
}

我们修改a.js的内容后运行webpack，输出的结果可以看到a.js的hash值是不同的，而未修改的main.js的hash值仍保持一致。这对项目中静态资源的版本管理是很有帮助的，我们可以只上传修改过的文件，其他的文件不会受到影响。

在webpack中还可以指定watch自动检测文件变化并同步这些变化。用法：

$ webpack –watch

或者在package.json的scripts属性里添加：

“webpack”: “webpack –config webpack.config.js –watch”

然后运行：

npm run webpack