webpack插件介绍 - Githubissues

html-webpack-plugin

插件作用：生成html文件，并且引用相关的 assets 文件(如 css, js)，给js添加hash，默认支持jade，ejs

title

生成html文件的标题

filename

就是html文件的文件名，默认是index.html

template

指定你生成的文件所依赖哪一个html文件模板，模板类型可以是html、jade、ejs等。但是要注意的是，如果想使用自定义的模板文件的时候，你需要安装对应的loader哦。举例子：

$ npm install jade-loader --save-dev

// webpack.config.js
...
loaders: {
    ...
    {
        test: /\.jade$/,
        loader: 'jade'
    }
}
plugins: [
    new HtmlWebpackPlugin({
        ...
        jade: 'path/to/yourfile.jade'
    })
]

如果你设置的 title 和 filename于模板中发生了冲突，那么以你的title 和 filename 的配置值为准。

inject

inject有四个值： true body head false

true 默认值，script标签位于html文件的 body 底部
body script标签位于html文件的 body 底部
head script标签位于html文件的 head中
false 不插入生成的js文件，这个几乎不会用到的

favicon

给你生成的html文件生成一个 favicon ,值是一个路径

plugins: [
    new HtmlWebpackPlugin({
        ...
        favicon: 'path/to/my_favicon.ico'
    })

然后再生成的html中就有了一个 link 标签

<link rel="shortcut icon" href="example.ico">

minify

使用minify会对生成的html文件进行压缩。默认是false。html-webpack-plugin内部集成了 html-minifier,因此，还可以对minify进行配置：（注意，虽然minify支持BooleanObject,但是不能直接这样写：minify: true , 这样会报错 ERROR in TypeError: Cannot use 'in' operator to search for 'html5' in true , 使用时候必须给定一个 { } 对象）

...
plugins: [
    new HtmlWebpackPlugin({
        ...
        minify: {
            removeAttributeQuotes: true // 移除属性的引号
        }
    })
]

cache

默认是true的，表示内容变化的时候生成一个新的文件。

showErrors

当webpack报错的时候，会把错误信息包裹再一个pre中，默认是true。

chunks

chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件

entry: {
    index: path.resolve(__dirname, './src/index.js'),
    devor: path.resolve(__dirname, './src/devor.js'),
    main: path.resolve(__dirname, './src/main.js')
}
plugins: [
    new httpWebpackPlugin({
        chunks: ['index','main']
    })
]

那么编译后：

<script type=text/javascript src="index.js"></script>
<script type=text/javascript src="main.js"></script>

如果你没有设置chunks选项，那么默认是全部显示。注意这里是选择你需要的chunks，把不需要的不要放进来。根据entry来定

excludeChunks

排除掉一些js

excludeChunks: ['devor.js']

// 等价于上面的

xhtml

一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。

chunksSortMode

script的顺序，默认四个选项： none auto dependency {function}

'dependency' 不用说，按照不同文件的依赖关系来排序。
'auto' 默认值，插件的内置的排序方式，具体顺序....
'none' 无序？
{function} 提供一个函数？

https://segmentfault.com/a/1190000013883242

webpack-dev-middleware

生成一个与webpack的compiler绑定的中间件，然后在express启动的服务app中调用这个中间件。这个中间件的作用呢，简单总结为以下三点：通过watch mode，监听资源的变更，然后自动打包（如何实现，见下文详解);快速编译，走内存；返回中间件，支持express的use格式。特别注明：webpack明明可以用watch mode，可以实现一样的效果，但是为什么还需要这个中间件呢？答案就是，第二点所提到的，采用了内存方式。如果，只依赖webpack的watch mode来监听文件变更，自动打包，每次变更，都将新文件打包到本地，就会很慢。

配置项

noInfo: false,
//  显示无信息到控制台（仅警告和错误） 

quiet: false,
//  向控制台显示任何内容 

lazy: true,
//  切换到延迟模式 
//  这意味着没有观看，而是重新编译每个请求  

watchOptions: {
aggregateTimeout: 300,
poll: true
},
// watch options (only lazy: false) 

publicPath: "/assets/",
//  绑定中间件的公共路径 
//  使用与webpack相同 

index: "index.html",
//  Web服务器的索引路径，默认为“index.html”。 
//  如果falsy（但不是未定义），服务器将不会响应到根URL的请求。 

headers: { "X-Custom-Header": "yes" },
//  自定义标题  

mimeTypes: { "text/html": [ "phtml" ] },
//  添加自定义mime /扩展映射 
// https://github.com/broofa/node-mime#mimedefine  
// https://github.com/webpack/webpack-dev-middleware/pull/150  

stats: {
  colors: true
},
//  用于形成统计信息的选项 

reporter: null,
//  提供自定义记录器来更改日志显示的方式。 

serverSideRender: false,
//  关闭服务器端渲染模式。有关详细信息，请参阅服务器端渲染部分。

postcss-loader

插件作用：给不同浏览器的样式加上前缀，如-webkit-

webpack-hot-middleware

webpack-hot-middleware 是用来进行页面的热重载的,刷新浏览器一般和 webpack-dev-middleware 配合使用，实现热加载功能。https://segmentfault.com/a/1190000011761345

使用

webpack

const HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: [
        './index',
        // 这将连接到服务器以在捆绑包重建时接收通知，然后相应地更新客户端捆绑包。
        'webpack-hot-middleware/client?path=/__webpack_hmr&reload=true',
    ],
    plugins: [
         new webpack.HotModuleReplacementPlugin(),
    ],
};

server

const path = require("path")
const express = require("express")
const webpack = require("webpack")
const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackHotMiddleware = require("webpack-Hot-middleware")
const webpackConfig = require('./webpack.config.js')
const app = express(),
            DIST_DIR = path.join(__dirname, "dist"), // 设置静态访问文件路径
            PORT = 9090, // 设置启动端口
            complier = webpack(webpackConfig)
let devMiddleware = webpackDevMiddleware(complier, {
    publicPath: webpackConfig.output.publicPath,
    quiet: true //向控制台显示任何内容 
})
let hotMiddleware = webpackHotMiddleware(complier,{
   log: false,
   heartbeat: 2000,
})
app.use(devMiddleware)
app.use(hotMiddleware);

配置项都有：

path - 中间件为事件流提供的路径 name - 捆绑名称，专门用于多编译器模式 timeout - 尝试重新连接后断开连接后等待的时间 overlay - 设置为false禁用基于DOM的客户端覆盖。 reload - 设置为true在Webpack卡住时自动重新加载页面。 noInfo - 设置为true禁用信息控制台日志记录。 quiet - 设置为true禁用所有控制台日志记录。 dynamicPublicPath - 设置为true使用webpack publicPath作为前缀path。（我们可以webpack_public_path在入口点的运行时动态设置，参见output.- publicPath的注释） autoConnect - 设置为false用于防止从客户端自动打开连接到Webpack后端 - 如果需要使用该setOptionsAndConnect功能修改选项通过传递第二个参数，可以将配置选项传递给中间件。

webpackHotMiddleware(webpack,{
    log: false,
    path: "/__what",
    heartbeat: 2000
})

log - 用于记录行的函数，传递false到禁用。默认为console.log path - 中间件将服务事件流的路径必须与客户端设置相匹配 heartbeat - 多长时间将心跳更新发送到客户端以保持连接的活动。应小于客户的timeout设置 - 通常设置为其一半值。

cisen / blog

webpack插件介绍 #106

html-webpack-plugin

title

filename

template

inject

favicon

minify

cache

showErrors

chunks

excludeChunks

xhtml

chunksSortMode

webpack-dev-middleware

postcss-loader

webpack-hot-middleware

使用

配置项都有：

webpack-dev-server和webpack-dev-middleware的区别

webpack-dev-server

webpack-dev-middleware

webpack-hot-middleware：