用途说明

()

webpack.config.js配置

1
2

案例

1
2

用途说明

S3Plugin ()

Uploads your content to s3. Can also run your html files through cdnizer to change the url to match

webpack.config.js配置

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

S3Plugin = require('webpack-s3-plugin')
new S3Plugin({
  exclude: RegExp,
  s3Options: {
    accessKeyId: string,
    secretAccessKey: string,
    region: string
  },
  s3UploadOptions: {
    Bucket: string
  },
  cdnizerOptions: {
    defaultCDNBase: string
  }
})

案例

1
2

用途说明

()

webpack.config.js配置

1
2

案例

1
2

用途说明

HtmlWebpackPlugin (自动生成html插件)

Generates a solid base html page for your web application with all your webpack generated css and js files built in. Supports custom templates, favicon, html-minifications and more:

webpack.config.js配置

1
2

HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({ title: 'Webpack App' })

案例

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

//webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
  entry:'./index.js',
  output:{
    path:__dirname+'/dist',
    filename:'bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin()
  ]
}

参数

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

{
  entry: 'index.js',
  output:{
    path: 'dist',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',//设置title的名字
      filename: 'admin.html',//设置这个html的文件名
      template:'header.html',//要使用的模块的路径
      inject: 'body',//把模板注入到哪个标签后
      favicon:'./images/favico.ico',//给html添加一个favicon
      minify:true,//HTML压缩
      hash:true,//hash化
      cache:false,//缓存
      showErrors:false,//显示错误
      chunks: {
          "head": {
            "entry": "assets/head_bundle.js",
            "css": [ "main.css" ]
          },
      },
      xhtml:false//是否自动毕业标签  
      }
    )
  ]
}

用途说明

()

webpack.config.js配置

1
2

案例

1
2

用途说明

()

webpack.config.js配置

1
2

案例

1
2

用途说明

NoErrorsPlugin (不显示错误插件)

When there are errors while compiling this plugin skips the emitting phase (and recording phase), so there are no assets emitted that include errors. The emitted flag in the stats is false for all assets. If you are using the CLI, the webpack process will not exit with an error code by enabling this plugin. If you want webpack to “fail” when using the CLI, please check out the bail option.

webpack.config.js配置

1

new webpack.NoErrorsPlugin()

案例

1
2

官方文档

NoErrorsPlugin

用途说明

ExtendedAPIPlugin ()

Adds useful free vars to the bundle.

__webpack_hash__ The hash of the compilation available as free var.

WARNING: Don’t combine it with the HotModuleReplacementPlugin. It would break and you don’t need it as the HotModuleReplacementPlugin export the same stuff.

webpack.config.js配置

1

new webpack.ExtendedAPIPlugin()

案例

1
2

用途说明

HotModuleReplacementPlugin (模块热替换插件)

模块热替换,如果不在dev-server模式下，需要记录数据，recordPath，生成每个模块的热更新模块

webpack.config.js配置

1
2

案例

1
2

用途说明

()

webpack.config.js配置

1
2

案例

1
2