webpack ------ plugins

这里记录一些我学过的plugins，并将作用与配置记录在这里。遇到不对的地方、不充分的地方，随时学习随时更新。——2017年1月16日 11:00:27

1.html-webpack-plugin

1.1简介

html-webpack-plugin可以为你在outpath中自动生成一个index.html文件，并插入script元素引用你打包的结果。

1.2用法

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

var HtmlWebpackPlugin = require('html-webpack-plugin');
...
plguins:[
    new HtmlWebpackPlugin({
        title: 'this is html title text',    //生成的index.html中title元素的text
    })
]

1.3配置项

1. title: 用来生成页面的 title 元素
2. filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
3. template: 模板文件路径，支持加载器，比如 html!./index.html
4. inject: true | ‘head’ | ‘body’ | false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，’head’ 将放置到 head 元素中。
5. favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
6. minify: {} | false , 传递 html-minifier 选项给 minify 输出
7. hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
8. cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
9. showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
10. chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
11. chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：’none’ | ‘default’ | {function}-default:’auto’
12. excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

1.4 多个html

当项目不是单页面引用时，我们就需要多个html，如何利用htmlwebpackplugin配置？

首先还是在entry入口处配置

entry:{
    main:'./src/app.js',
    mobile:'./src/mobild.js',
    vendors:['jquery','bootstrap']
}

html-webpack-plugin插件的每一个实例对应一个html文件，如果生成多个html，就需要多个html-webpack-plugin的实例。

var HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins:[
    new HtmlWebpackPlugin({
        title:'this is main page',
        template:'./src/index.js',
        filename:'index.html',
        /** chunks这个参数告诉插件要引用entry里面的哪几个入口 */
        chunks: ['main', 'vendors'],
        /** 要把script插入到标签里 */
        inject: 'body'
    }),
    new HtmlWebpackPlugin({
        title:'this is mobile page',
        template:'./src/mobile.js',
        filename:'mobile.html',
        /** chunks这个参数告诉插件要引用entry里面的哪几个入口 */
        chunks: ['mobile', 'vendors'],
        /** 要把script插入到标签里 */
        inject: 'body'
    }),
]

1.5疑问

1. 打包的css文件是否也可以自动插入到index.html中？

2.ProvidePlugin

2.1简介

你的项目有时候会要加载各种各样的第三方库，一些老的库不支持AMD或者CommonJS等一些先进的格式，比如一些jQuery的插件，它们都依赖jQuery，如果直接引用就会报错 jQuery is not undefined这类的错误，使用ProvidePlugin把一个全局变量插入到所有的代码中

  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })

这样在index.js中就不再需要写

var $ = require('jquery')

而我们可以在任何地方使用$、jQuery、window.jQuery

3.CommonsChunkPlugin

3.1简介

当我们引入的第三方库过多时，打包的文件会特别大，我们需要拆分他们成多个包

3.2使用

首先在入口entry配置：

entry:{
    main: './src',
    vendors: ['jquery', 'bootstrap']
}
...

然后在plugins处添加CommonsChunkPlugin

plugins:[
    ...
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
]

此时运行webpack，build文件夹中生成了两个js文件，一个是应用的index.js，另一个就是jquery和bootstrap打包在一块的vendors.js。

4.extract-text-webpack-plugin

4.1简介

该插件可以在打包的时候将css文件独立出来。

4.2使用

1.安装模块：npm i extract-text-webpack-plugin –save-dev
2.头部引用：

var ExtractTextPlugin = require("extract-text-webpack-plugin");

3.loaders:

            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style', 'css')
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
            },

这里css和scss都写上了，选择使用。

4.plugins:

new ExtractTextPlugin("style.css", {
    allChunks: true
})

4.3问题

之前想使用这个插件，但在网上找的资源都用不了，但也明白一些这个插件的配置项是干嘛的。然后感觉可能是我的scss的问题。所以将该插件的Loader配置给scss文件，但css文件同时配置也无所谓。