webpack命令行参数

1
2
3
4

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包
$ webpack --watch   //监听变动并自动打包
$ webpack -p    //压缩混淆脚本，这个非常非常重要！
$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

用途说明

extract-text-webpack-plugin (提取样式插件)

把额外的数据（CSS代码）加到编译好的文件中

webpack.config.js配置

1

new ExtractTextPlugin("[name].[hash].css")

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
                template: './src/public/index.html',
                inject: 'body'
            }),
        new ExtractTextPlugin("[name].[hash].css")
    ]
}

新建 index.html:

1

$ vim ./src/tpl/index.html

修改 webpack.config.js 配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

plugins:[
        new HtmlWebpackPlugin({
            filename: __dirname+'/build/html/login-build.html',
            template:__dirname+'/src/tpl/login.html',
            inject:'body',
            hash:true
        }),
        new HtmlWebpackPlugin({
            filename: __dirname+'/build/html/index-build.html',
            template:__dirname+'/src/tpl/index.html',
            inject:'body',
            hash:true
        }),
        // 拆分插件
        new webpack.optimize.CommonsChunkPlugin({
            name:'user', // 上面入口定义的节点组
            filename:'build-user.js' //最后生成的文件名
        }),
        // css抽取
        new extractTextPlugin("[name].css"),
    ]

这样执行webpack命令后，生成的2个目标文件（index-build.html，login-build.html），有什么问题呢？

2个文件都引入了所有的js和css。

下面我们要做到按需引用，不同的html模板引入仅它自己需要的css和js

1. 为index.html新建一个index.css:

   1	h1{color: green}

2. 为index.html新建index.js，并在其中引入index.css:

   1 2	alert('这是首页'); require('./css/index.css');

3. 编辑webpack.config.js，为不同的html模板指定不同的配置节点

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

   var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpack = require('webpack'); var extractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { // entry是入口文件，可以多个，代表要编译那些js //entry:['./src/main.js','./src/login.js','./src/reg.js'], entry: { 'main':'./src/main.js', 'user':['./src/login.js','./src/reg.js'], 'index':['./src/index.js'] }, externals:{ 'jquery':'jQuery' }, module:{ loaders:[ // {test:/\.css$/,loader:'style-loader!css-loader'}, {test:/\.css$/,loader:extractTextPlugin.extract('style','css')} ], }, output:{ path: __dirname+'/build/js', // 输出到那个目录下（__dirname当前项目目录） filename:'[name].js' //最终打包生产的文件名 }, plugins:[ new HtmlWebpackPlugin({ filename: __dirname+'/build/html/login-build.html', template:__dirname+'/src/tpl/login.html', inject:'body', hash:true, chunks:['main','user'] // 这个模板对应上面那个节点 }), new HtmlWebpackPlugin({ filename: __dirname+'/build/html/index-build.html', template:__dirname+'/src/tpl/index.html', inject:'body', hash:true, chunks:['index'] // 这个模板对应上面那个节点 }), // css抽取 new extractTextPlugin("[name].css"), ] };

4. 执行webpack之后

查看index-build.html中只引入了index.css和index.js

用途说明

WebpackPluginGraphqlSchemaHot ()

This plugin tracks changes in your GraphQL Schema and generates its introspection in json and txt formats.

webpack.config.js配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const path = require('path');
const WebpackPluginGraphqlSchemaHot = require('webpack-plugin-graphql-schema-hot');
var plugins = [];
{
  plugins: [
    new WebpackPluginGraphqlSchemaHot({
      schemaPath: path.resolve(__dirname, '../schema/index.js'),
      output: {
        json: path.resolve(__dirname, '../build/schema.graphql.json'),
        txt: path.resolve(__dirname, '../build/schema.graphql.txt'),
      },
      runOnStart: true,
      verbose: true,
      hideErrors: false,
    }),
  ]
}

案例

1
2

用途说明

FaviconsWebpackPlugin ()

Automatically generates over 30 favicons (configurable) for Android, iOS, and the different desktop browsers from one source png. Integrates well with the html-webpack-plugin.

webpack.config.js配置

1
2
3
4
5
6
7
8

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
var plugins = [];
{
  plugins: [
    new FaviconsWebpackPlugin('my-logo.png')
  ]
}

案例

1
2

用途说明

()

webpack.config.js配置

1
2

案例

1
2

用途说明

()

webpack.config.js配置

1
2

案例

1
2

用途说明

WebpackShellPlugin ()

Fires shell commands before and after webpack builds. Great for reporting tools, testing, or opening your browser for development.

Learn more.

webpack.config.js配置

1
2
3
4
5
6
7
8
9
10
11

const WebpackShellPlugin = require('webpack-shell-plugin');
var plugins = [];
{
  plugins: [
    new WebpackShellPlugin({
      onBuildStart: ['echo "Starting"'],
      onBuildEnd: ['python pi.py', 'node openBrowser.js', 'haxe game.hx && ssh -i /myPems/key.pem BObama@healthcare.gov']
    })
  ]
}

案例

1
2