webpack

看博客有些看的有歧义，是因为版本不同，可以参考：http://www.jianshu.com/p/cb8343020833

1.webpack-dev-server

它相对于一个小型express服务，作用等于webpack-dev-middleware和webpack.HotModuleReplacementPlugin。

作用：在浏览器上实时反馈修改的内容，对调试有帮助！通过该插件可以完成插件webpack-hot-middleware、webpack-dev-middleware的功能！

参考博客：http://colabug.com/116168.html

它和webpack使用差不多，直接输入命令行：

 webpack-dev-server --progress --colors

配置也非常简单：只需要在webpack.config中配置devServer,如下：

devServer: { //新增配置项
    // SERVER 将从哪个目录去查找内容文件 （即页面文件，比如 HTML）
     contentBase: path.join(__dirname, "src/html"),
    // http://localhost:3333 来访问应用
     port: 3333
 } 

2.webpack.HotModuleReplacementPlugin和webpack-dev-middleware

express中间件，在开发工作利用，作用：不需要刷新页面，就可以直接替换、增删模块，也就是热更新！它与插件webpack-hot-middleware一起使用，webpack.config如下：

const path = require("path");
const webpack = require('webpack')
module.exports = {
    //必须要有webpack-hot-middleware/client?noInfo=true&reload=true
    entry: ["webpack-hot-middleware/client?noInfo=true&reload=true","./runoob1.js"],
    output: {
        publicPath:"/dist/",
        filename: 'bundle.js'
        //path: path.join(__dirname)
    },
    module: {
        rules: [{
                test: /.css$/,
                loader: ['style-loader', 'css-loader']
            },
            {
                test: /.(png|jpg|gif)$/,
                loader: 'url-loader'
            }]
    },
    // },
    // devServer:{
    //     contentBase: path.join(__dirname),
    //     publicPath:"/dist",
    //     port: 3333,
    //     hot: true  // 让 dev-server 开启 HMR
    // },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),  //让 webpack 启动全局 HMR
        new webpack.NoEmitOnErrorsPlugin()   //出错时只打印错误，但不重新加载页面
    ]
}

dev-server代码如下：

const express = require("express");
const app = express();
const webpack = require('webpack');
const webpackMiddleware = require("webpack-dev-middleware");
const path = require("path");
let webpackConf = require('./webpack.config.js');


var compiler = webpack(webpackConf);

app.use(webpackMiddleware(compiler, {
    publicPath: webpackConf.output.publicPath
}));

app.use(require("webpack-hot-middleware")(compiler, {  //使用 webpack-dev-middleware
    log: console.log,
    heartbeat: 10 * 500
}));

app.get("/", function(req, res) {
   var file = path.resolve(__dirname, "./index.html");

    res.sendFile(file);
});

app.listen(3333);

3.代码优化（核心插件，自带的）

3.1 html-webpack-plugin

 插件，生成一个空html文件,基本配置项：

new HtmlWebpackPlugin({
            title:"my test",
            template: 'index.html',
            filename:"web/account.html",
            inject:'head'
        })

高级配置：利用模板解析器来解析模板

module: {
  loaders: [
    { test: /\.hbs$/, loader: "handlebars" }
  ]
},
plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template using Handlebars',
    template: 'my-index.hbs',
    inject: 'body'
  })
]

minify  {} | false ,html-webpack-plugin 内部集成了 html-minifier ,这个压缩选项同 html-minify 的压缩选项完全一样， 传递 html-minifier 选项给 minify 输出，false就是不使用html压缩。

配置项参考：https://github.com/kangax/html-minifier#options-quick-reference，例如：

minify:{
      removeComments: true,
      collapseWhitespace: true
}

3.2 webpack.optimize.UglifyJsPlugin

对目标JS进行压缩，例如：

compress: {
            warnings: false
        },
        sourceMap: true,//这里的soucemap 不能少，可以在线上生成soucemap文件，便于调试
        mangle: true

3.3 css插件

extract-text-webpack-plugin

从JS中抽离css 模块，参考：http://www.cnblogs.com/dyx-wx/p/6529447.html

压缩css:optimize-css-assets-webpack-plugin，两者配合使用。

3.4 commons-chunk-plugin插件

http://www.css88.com/doc/webpack2/plugins/commons-chunk-plugin/

3.5 clean-webpack-plugin插件

http://www.cnblogs.com/oufeng/p/6819320.html

 

转载于:https://www.cnblogs.com/liuyinlei/p/7163609.html