使用 WebpackDevServer 提升开发效率

安装

npm install webpack-dev-server -D

webpack-dev-server基于dist文件启动一个静态服务器，有一个好处就是当我们修改文件之后，webpack会自动帮我们进行一次打包，自动刷新浏览器

var HtmlWebpackPlugin = require('html-wenpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
var path = require('path')
module.exports = {
    // 只有前面加了cheap就证明只精确到行，不精确到列
    devtool: 'cheap-inline-source-map',
    entry: {
        main: './src/index.js',
        sub: './src/index.js'
    },
    devServer: {
        // 这个参数是告诉webpack我们要在那个文件夹起一个服务器
        contentBase: './dist'
        // 会自动打开浏览器
        open: true
        // 代理配置转发
        proxy: {
            '/api': 'http://localhost:3000'
        }
    },
    output: {
        publicPath: 'http://cdn.com.cn',
        path: path.resolve(__dirname, './dist'),
        // 这个name指的是entry的key值
        filename: '[name].js'
    }
}

package.json输入红框

我们自己写一个简单的webpack-dev-server
我们在package.json上面加上（额外知识：–watch的意思就是当我们改动代码，就会立即在执行一次webpack命令）

我们现在开始写server.js
complier是一个编译器

我们可以在命令行使用webpack
也可以在node中使用webpack