使用webpack打包你的项目

    上周了解了gulp，不得不再来了解一下应用更多的webpack，毕竟现在vue项目中使用的是webpack。先来了解一些webpack在命令行中的简单操作。

    首先在项目目录中安装webpack。

npm install webpack --save-dev

    安装完成后，项目中增加了node_modules文件夹和package.json文件。在项目目录中新建index.html文件，作为项目的入口文件；同时新建hello.js和style.css文件，在此文件中编码，作为打包的源文件。然后使用webpack进行打包。

webpack hello.js hello.bundle.js //基本命令,hello.bundle.js为打包后的文件名称

    打包后项目中自动生成了hello.bundle.js文件，我们可以在index.html文件中引用它。

    在hello.js中，可以通过require的方式引入其他文件。若引入的是css文件，需要安装loader。

npm install css-loader style-loader --save-dev

    安装完成后，在引入时，需要指定使用loader来处理。

require('style-loader!css-loader!./style.css')

    之所以在使用css-loader的同时还要使用style-loader，是因为在打包时将css文件中的代码通过style插入到了head中。css-loader使得webpack可以处理css文件，sytle-loader将css-loader处理完的文件，新建style标签插入到html文件中。

    为了方便require，避免在每次引入时都加上很多loader，可以通过webpack的参数来解决。

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!'  //如果是css文件就使用loader依次处理

    但是每次更新打包时都要输入这些命令，依旧有些繁琐。我们可以监听文件变化，当有文件变化时，自动更新打包。

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!' --watch  //通过--watch参赛监听文件变化

    此外，webpack还有许多其他参数。

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!' --progress  //可以显示打包过程
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!' --display-modules  //可以显示引用的所有模块
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!' --display-modules --display-reasons  //可以显示打包模块的原因

    了解过命令行后，今天抛开现成的脚手架，学习从0开始搭建一个项目。

    安装完webpack后，新建文件夹src，用来存放源文件；新建文件夹dist，用来存放打包后的文件；新建index.html，作为入口文件；新建webpack.config.js作为webpack的配置文件。先来写一个最简单的配置：

module.exports = {
  entry: './src/js/main.js', // 打包的入口从哪里开始
  output: {  
    path: './dist/js',  //打包以后的文件放到哪里
    filename: 'bundle.js' //打包后的文件名
  }
}

    若需要打包的入口文件有多个，则需要配置多个入口：

module.exports = {
  entry: {
    a: './src/js/a.js',
    b: './src/js/b.js'
  },
  output: {  
    path: './dist/js', 
    filename: '[name]-[hash]-[chunkhash].js'  //name对应entry的key值，hash为每次打包的hash，chunkhash为每个chunk自己的hash值，可以理解为每个文件的md5值，保证了每个文件的唯一性。
  }
}

    配置完成后，可以在命令行中直接运行webpack进行打包。若要继续配置上面讲到的参数，需要在package.json中完成。

{
  'name': '项目名称',
  'version': 'v1.0.0',
  'description': '',
  'main': 'index.js',
  'scripts': {
    'webpack': 'webpack --config webpack.config.js --progress --display-modules --colors'  //在此配置真实的webpack命令
  },
  'author': '',
  'license': 'ISC',
  'devDependencies':{
    'webpack': '^1.13.2'
  }
}

    打包完成后，当我们使用chunkhash命名打包后文件时，文件名是不确定的，这时需要引入插件来解决在index.html文件中动态引入打包后文件的问题。

npm install html-webpack-plugin --save-dev

    安装完成后，可以在webpack.config中进行配置。

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: '',  //表示运行环境的上下文，默认值为运行脚步的目录，通常为根目录。
  entry: {
    a: './src/js/a.js',
    b: './src/js/b.js'
  },
  output: {  
    path: './dist', 
    filename: 'js/[name]-[chunkhash].js'  
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'index.html'  //以根目录下的index.html文件为目标生成打包文件
    })
  ]
}

    配置完成后，运行webpack就可以实现项目的自动化构建了。更多的配置项可参考文档。