纯手写 webpack4.0+ 配置

项目在我的git，需要的小伙伴去看看吧！
https://github.com/LilyLaw/webpack-template
欢迎star！

整体架构

该框架将开发模式和生产模式下的公共配置提取出来,通过webpack-merge来整合，减少代码冗余

css相关

• style-loader
  将css写进一对<style>标签里，再通过JavaScript脚本把这个标签注入到html页面，如下图
  

  style-loader.png

  这个一般在开发环境中使用，生产环境中尽量抽取css到单独的文件

• css-loader

  在项目中，如果是通过@import, require(), url() 等方式调用css，webpack是无法解析的，webpack默认只能解析JavaScript，所以需要css-loader来解析上述语法。

• less-loader

  在webpack中将less编译成css

• postcss-loader

  内容太多，先去看看 postcss 是什么吧 https://postcss.org/

• MiniCssExtractPlugin

  单独抽取出css文件，只能在production模式下使用,用了这个插件就不能再用style-loader了。

• OptimizeCSSAssetsPlugin

  css压缩插件，把一些空格换行之类的字符去掉，减少文件大小

js相关

• babel-loader

  目前并非全部浏览器都会支持babel语法,所以在webpack环境中需要将babel语法转换为浏览器可识别的js语法,babel-loader就是来做这个的。

• eslint-loader

  基于webpack的js语法检测工具，如果有语法错误程序必须先将问题解决否则无法运行

• UglifyJsPlugin

  js压缩插件

  注意 js压缩插件uglifyjs-webpack-plugin默认无法压缩ES6语法的js代码，因此需要babel来预先解析成ES5的语法。否则会报错

  <font color=#00ffff>ERROR in main.js from UglifyJs Unexpected token: name «domsss», expected: punc «;» [./src/index.js:5,0][main.js:17207,5]</font>

非js文件相关

• url-loader

  webpack默认只能处理js文件，对于.png,jpg,jpeg等格式的图片或其他文件是无法识别的，会报错。为了可以使用这些文件，需要用url-loader解析。
  若文件小于设置的体积，可转换为base64编码格式。

  注意 url-loader 内部已集成了file-loader,所以如果使用url-loader就不必再用file-loader

• image-webpack-loader

  压缩图片

其他

• HtmlWebpackPlugin

  把打包后的 CSS 或者 JS 文件的引用直接注入到 HTML 模板中（动态的添加link , script ,不再是将整个文件注入到html中），这样就不用每次手动修改文件引用了（尤其是文件名中有哈希值的时候）。

• CleanWebpackPlugin

  每一次打包的时候，先将上一次打包的文件清理掉，放置过期无用文件堆积

• webpack-bundle-analyzer

  分析你的代码，并计算各个依赖在使用中的大小，最后生成一个分析图，非常直观，让你可以知道哪部分该优化了。

注意

1. loader如果是一个数组，则调用顺序是从后往前。 比如 处理less用到了 less-loader，css-loader，style-loader，因此正确写法应该像下面：

    {
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
    }