webpack使用笔记

安装

npm install -g webpack // 全局安装
npm install --save-dev webpack //本地安装

在完成全局安装和本地安装以后，就能够开始进行webpack的使用了。

尝试打包

安装完成以后，咱们能够尝试使用webpack进行一次简单的打包。
webpack最基本的命令就是webpack，能够直接使用webpack命令对文件进行编译，例如

webpack main.js bundle.js

上述代码就能将main.js文件打包成bundle.js文件。

使用配置文件

也能够在webpack配置文件中设置好参数后直接运行webpack命令进行打包。在项目根目录下新建webpack.config.js，webpack会默认其为配置文件。

module.exports = {
  entry:  __dirname + "/src/main.js", //设置main.js为项目入口
  output: {
     path: __dirname + "/public",//设置public为编译后的目录
     filename: "bundle.js"//编译后输出文件的文件名
  }
}

注意：__dirname是指项目根目录，必需要加上，这样在打包以后才能准确找到相应目录。
配置好以后，在命令行中直接输入webpack就能获得前面的一样的结果。
接下来也能够在package.json文件中配置webpack命令的代替方式，以下

"scripts": {
  "start":"webpack"
}

这样直接输入 npm run start也能取得一样的效果。
若是想要执行自定义webpack的配置文件的话，可使用以下代码

webpack --config webpack.dev.config.js

这样就能将配置文件设置为webpack.dev.config.js了。也能够在package.json中去设置

"scripts": {
  "webpack":"webpack --config webpack.dev.config.js"
}

运行 npm run webpack，就能实现和上面代码同样的功能，将配置文件设置为webpack.dev.config.js并执行。

配置文件解析

在配置文件中，entry字段能够分别设置为如下三种形式：
1.字符串
指定这个目录下的文件为入口文件

entry:'main.js' //指定main.js为入口文件

2.数组
存在多个入口文件的时候，使用数组方式能够添加多个互相不依赖的文件

entry:['src/main.js','dist/index.js']  //两个文件会被打包为一个文件

3.对象
指定多个文件打包成多个文件以供不一样页面使用

{
    entry:{
        'mainEntry':'src/main.js',
        'indexEntry':'src/index.js'
    },
    output:{
        path:'/dist',
        filename:'[name].js' //执行后会打包成mainEntry.js和indexEntry两个文件
    }
}

output最经常使用的两个属性分别是filepath和filename。
其中filepath是一个绝对路径，指定打包生成以后的文件存放的目录。fliename指定打包生成以后的文件名。
根据上述entry字段的叙述，咱们有时候会同时指定多个入口文件，若是只是在output.filename中指定一个文件名，那么会将两个入口文件打包到一个文件中去。这时候咱们可使用占位符的方式来指定output.filename，这样就能根据相应的入口文件打包出相应的文件了。
占位符能够设置如下内容：

name 模板名称，对应上面的mainEntry和indexEntry
hash 总体的hash值
chunkhash 分片的hash值

hash和chunkhash

为何会有hash和chunkhash值呢？其实，hash值是在整个打包过程当中每一次版本变化生成的值，这样一来，一旦某一个资源文件有发生变化，则整个hash值就会发生改变，从而致使全部打包出来的文件的文件名都会发生变化。
怎样避免这个问题呢，那就是使用chunkhash，chunkhash是根据具体的模块的变化来生成的值，因此某一个文件的变化只会影响到它本身的chunkhash值的变化。
例如：

{
    entry:  {
        mainEntry:__dirname + "/app/main.js",
        indexEntry:__dirname + "/app/index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name]-[hash].js"
    }
}

使用name加hash的方式来命名打包后的文件，生成的结果以下

Hash: 8449fbacd884544a83ed
Version: webpack 2.5.1
Time: 57ms
                             Asset     Size  Chunks             Chunk Names
 mainEntry-8449fbacd884544a83ed.js  2.73 kB       0  [emitted]  mainEntry
indexEntry-8449fbacd884544a83ed.js  2.71 kB       1  [emitted]  indexEntry
   [0] ./app/index.js 76 bytes {1} [built]
   [1] ./app/main.js 84 bytes {0} [built]

两个打包以后的文件拥有同一个hash值8449fbacd884544a83ed，一旦main.js和index.js其中的一个文件发生变化，则会引发总体的hash值变化。
若是使用chunkhash的话，若是所示：

{
    entry:  {
        mainEntry:__dirname + "/app/main.js",
        indexEntry:__dirname + "/app/index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name]-[chunkhash].js"
    }
}

生成结果以下：

Hash: 41e84bc2e3034e423af1
Version: webpack 2.5.1
Time: 54ms
                             Asset     Size  Chunks             Chunk Names
 mainEntry-d4d7121b09d82bb73a8e.js  2.73 kB       0  [emitted]  mainEntry
indexEntry-252220e65aed8b7f327b.js  2.71 kB       1  [emitted]  indexEntry
   [0] ./app/index.js 76 bytes {1} [built]
   [1] ./app/main.js 84 bytes {0} [built]

一样也会生成hash值，可是两个文件的chunkhash值是互不影响的，其中的一个文件发生变化，则只会改变发生变化文件打包后的文件名。
看上去好像chunkhash能取代hash的做用，可是我认为hash的存在确定有其适用的场景。好比在作静态资源大版本管理和文件夹命名的时候就能用上，确定还会有更多其余可能的场景。

使用plugin

在使用hash和chunkhash来为打包以后的文件名作版本，每次打包以后会生成新的文件名，咱们没法预知每一次打包以后的文件名，因此有什么办法能够一次实现html文件中对打包文件进行引用呢？
这里咱们可使用html-webpack-plugin这个插件来帮咱们完成。

1. 在项目目录中对插件进行安装：

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

1. 在配置文件中对插件进行引用:

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

1. 使用并配置插件参数
   插件的使用方式是直接在配置文件中添加一个值为数组的属性：

plugins:[
  new htmlWebpackPlugin();  //不加任何参数直接新建插件对象是最基本使用方式
]

这样就能在output.path指定的目录中生成一个新的index.html文件，这个index.html文件会将全部打包完成以后的静态资源进行引用。因为每次从新打包以后的index.html文件是从新生成的，因此就解决了上面咱们打包以后的静态资源文件名不断变化的问题。
因为咱们没有进行任何的参数设置，因此webpack会用默认的模板打包生成一个文件，咱们也可使用自定义模板的方式进行打包生成。

new htmlWebpackPlugin({
  template:'index.html', //webpack会在根目录下寻找index.html文件做为模板
  fliename:'main.html', //还能够自定义打包生成以后的文件名
})

这样咱们就能使用根目录下的index.html文件做为模板，在output.path下打包生成一个名为main.html的文件，这个文件包含了咱们打包以后的静态资源文件的引用。
可是咱们真实项目中不一样类型的静态资源存放的目录不同，这里其实能够在filename属性中来指定带目录的文件名。

filename:__dirname+'/dist/views/index.html'

这样咱们就能将打包以后的html文件和js文件分开存放了。
另外，咱们若是须要进行多页面开发的话，能够屡次建立新的htmlWebpackPlugin对象来配置。大致模板以下：

new htmlWebpackPlugin({
  template:'index.html', 
  fliename:'main.html', 
}),
new htmlWebpackPlugin({
  template:'index.html', 
  fliename:'side.html', 
}),
...

html-webpack-plugin插件的其余配置参数和使用方法能够去官网查看。

使用loader编译ES6代码

经过使用loader，webpack能实现对各类各样的文件进行处理。
loader须要在配置文件中的modules下进行配置，主要包括如下字段：

test 一个匹配该loader所须要处理的文件拓展名的正则表达式
loader loader的名称
include/exclude 指定要处理的文件夹/屏蔽不须要处理的文件夹
query 额外选项

使用 babel

babel须要在命令行中安装单独的包

npm install --save-dev babel-core babel-loader babel-preset-es2015

以上是本地安装，须要在项目根目录下执行。
按照上面的loader配置方法，咱们能够按照以下模板来配置babel

module:{
  loaders:[{
    test:/\.js$/, //以.js结尾的文件都是babel须要处理的
    loader:'babel-loader', //loader的名称
    exclude:/node_modules/, //忽略node_modules目录下的全部文件
  },{} //多个loader用逗号分隔开
  ,...]
}

配置完以后在项目根目录下建立文件.babelrc，并在文件中写入如下内容：

注：在windows系统下不能直接建立.babelrc文件，能够在根目录下打开命令行输入type null>.babelrc命令建立

{ "presets": [ "es2015" ] }

完成以后执行webpack命令，在编译js文件的时候就会使用babel-loader将文件中的ES6代码编译成浏览器可执行的ES5代码。