42-【Webpack】常用配置整理（整理中）

1-开启定位错误文件的具体地方

// webpack.config.js
module.exports = {
    devtool:"inline-source-map", 
    // 帮助将报错内容具体定位到某个文件的某几行。
}

2-观察者模式（类似热更新）需刷新浏览器

// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"  // 开启观察者模式
},

运行

1	npm run watch

缺点：需要刷新浏览器，才可以看到修改后的实际效果。

3-观察者模式（类似热更新）不需刷新浏览器

使用 webpack-dev-server 开启简单web服务器，实现实时加载。
安装：

1	npm install --save-dev webpack-dev-server

修改配置：

// webpack.config.js
module.exports = {
    devServer:{
        contentBase:"./dist" // 开启实时刷新服务
    },
}
// 默认 localhost:8080 在dist目录下

设置直接运行开发服务器：

// package.json
"scripts": {
    "start": "webpack-dev-server --open",
}

模块热替换 https://doc.webpack-china.org/guides/hot-module-replacement

4-自动将处理后的文件发布到服务器上

使用 webpack-dev-middleware 中间件容器，这里使用 webpack-dev-middleware 和 express server 演示：
安装express和webpack-dev-middleware：

1	npm install --save-dev express webpack-dev-middleware

配置webpack：

// webpack.config.js
module.exports = {
    output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist'),
        publicPath: '/'
    },
}

配置 publicPath 目的是为了在服务器脚本用到确保文件资源能在 localhost:3000 下正常访问。

设置express服务：
在根目录添加 server.js

// server.js
const express = require('express');
const webpack = require('webpack');
const Middleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);


app.use(Middleware(compiler,{
    publicPath: config.output.publicPath
}))

// Server the files on port 3000
app.listen(3000,function(){
    console.log('测试案例服务器开启，端口号 3000')
})
// 然后在package.json 添加npm script

添加 npm script 到 package.json :

// package.json
"scripts": {
    "server":"node server.js"
}

npm run server 运行

5-精简输出（删除未引用得代码）

如删除项目中未引用的export或import的代码：
安装UglifyJSPlugin：

1	npm install --save-dev uglifyjs-webpack-plugin

引用：

// webpack.config.js
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports={
    ...
    plugins:[
        new UglifyJSPlugin()
    ]
}

最后更新时间：2018.01.31

pingan8787