前言
终于开始踩坑webpack了，也算是对自己的一个挑战吧，在业务还写不熟练的时候就开始了工程化的探索？也不尽然，毕竟他们也是息息相关的，我对这种东西其实一直都是听厌烦的，觉得有需要就去查就可以了，但是随着自己野心越来越大，有些能最方便你一步登天的东西自然要认真去看，webpack无疑是其中的佼佼者。
loader
在学之前，我对于webpack的了解很有限，大致集中在entry, output以及越来越健全的默认配置中，要问我现在有什么感觉，说实话还是没有什么感觉，但是想先走一遍然后配着业内最成功的两个webpack配置，CRA和VueCli来看，说不定到时候会有什么感觉？
简单的缕一缕，webpack算是个打包工具，又不局限于打包工具，如今的前端工程话趋势已经渐趋成熟，webpack就是整个前端工程化的支柱，基石算不上，但是支柱肯定是名副其实的。
loader作为webpack非常重要的一部分，它可以对模块的源代码进行转换，使得webpack不只是能够用来打包js，还可以去加载图片，css等。
对于打包图片资源，我们常用的有file-loader和url-loader两种，后者主要用来将图片转为base64打包进js里面，而前者则会把图片和js分开，除此之外具体用法并无差别：
module: {
rules: [
{
test: /\.jpg$/,
use: {
loader: "file-loader",
options: {
name: "[name]_[hash].[ext]",
outputPath: "images/"
}
}
}
]
},
如这般打包出来文件如下：
同时要注意loader执行是有顺序的，从下到上，从右到左。
如对于sass文件来说，我们首先要把sass转换成css，然后再添加样式，所以loader应该这样引入:
use: ["style-loader", "css-loader", "sass-loader"]
当然关于样式打包还不只是这些，常用的如浏览器厂商前缀的自动添加，我们就需要再加上:
tyarn add postcss-loader autoprefixer
同时建立一个postcss.config.js的配置文件来写postcss的配置：
module.exports = {
plugins: [require("autoprefixer")]
};
这样打包出来的文件就有了厂商前缀。
css-loader
关于css-loader配置，常用的有:
{
loader: "css-loader",
options: {
importLoaders: 2,
modules: true
}
},
前者用来把sass中又引用sass而无法使用postcss -loader等的情况排除，后者使用模块化引用的方式，用来解决全局样式和局部样式的问题。
plugins
最简单的html-webpack-plugin，可以在打包结束后自动生成html文件，并使得该文件可以自动引用打包好的js文件。
还有clean-webpack-plugin，demo如下：
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html"
}),
new CleanWebpackPlugin()
],
他会自动去output里面查找要去删除的输出文件的目录，并加以操作，在打包之前便将其删去。
source map
source map的存在主要是为了建立开发代码与打包环境之间的联系，使得能够放在打包环境中的代码中的错误能够正确的映射到开发代码中，以便我们可以修改。
简单的来说，我们如下配置即可：
devtool : 'cheap-module-eval-source-map'
对于生产环境把eval字段去掉。
webpack 权限报错
使用过程中可能会出现：
webpack is watching the files…
Error: EPERM: operation not permitted, lstat...
类似这样的权限报错问题，一般都可以通过sudo来解决，windows上也可以安装sudo，这篇文章有讲到，或者搜一下sudo for windows也可以。
关于webpack-dev-server
Vue和React的官方脚手架都有这个东西的身影，他们的服务器甚至这也是在这个上面定制的，所以这部分算是个科普内容，因为这玩意已经挺好用了，我们不需要用express配合中间件再写一个监听变化自动打包的服务器了。
devServer: {
contentBase: "./dist",
open: true
},
在webpack.config.js 中，通过如上配置可以打开一个端口，当然你需要下载好webpack-dev-server然后使用它。
除此之外我们也有–watch 的做法，看如下package.json：
"scripts": {
"dev": "webpack --watch",
"start": "webpack-dev-server"
},
