webpack-4-开发

官网地址：webpack官网

1 源映射

为了使查找错误和警告更加容易，JavaScript提供了源映射

webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "main.js",
        path: path.resolve(__dirname,'dist')
    },
    ...
+   devtool: 'inline-source-map'
};

只需要加这一句，如果发现错误，就会提示你具体哪个js的哪一行出错了。

2 使用观察模式

使用这个模式后，代码修改后不需要重新编译，会自动更新相应文件。监听改变完成后再浏览器刷新界面就可以了。这个模式使用起来很简单：
package.json

"scripts":  {
	"watch": "webpack --watch"
}

webpack.config.js CleanWebpackPlugin插件添加参数

plugins: [
	new CleanWebpackPlugin({cleanStaleWebpackAssets: false}) // 添加这个参数是为了监听到代码改变时，不会把没有改变的文件清除
]

好了，就是这么简单

3 使用webpack-dev-server

这webpack-dev-server为您提供了一个简单的Web服务器以及使用实时重新加载的功能。

使用这个后，代码改变后会自动监听，浏览器也会自动刷新
安装

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

webpack.config.js

module.exports  = {
	devServer: {
		// 这告诉webpack-dev-server您要从dist目录中的文件提供服务localhost:8080。
		contentBase: './dist'
	}
}

package.json

"scripts": {
	"start": "webpack-dev-server --open"
}

然后使用npm start (或者npm run start）运行，我们将看到浏览器自动加载页面。如果现在更改任何源文件并保存它们（ctr + s）会自动编译运行，浏览器会自动加载。

4 webpack-dev-middleware

webpack-dev-middleware是一个包装程序，它将由webpack处理的文件发送到服务器。它在webpack-dev-server内部使用，但是如果需要，它可以作为单独的软件包使用，以允许进行更多自定义设置。我们将看一个webpack-dev-middleware与Express服务器结合的示例。

例子看官网的就好