webpack真实项目配置

首先在此声明，本文参考webpack：从入门到真实项目配置
文中所有遇见的配置问题都在下文都有说明（部分报错链接需翻墙访问），再者，项目基于node-v10.15.2，npm-v6.4.1，webpack-v4.41。

1. 浏览器不支持module.exports

2. npm i --save-dev @babel/core babel-loader

3. babel-preset-env的作用是告诉babel使用哪种编码规则进行文件处理

     "babel": {
         "presets": ["@babel/env"]
     }
   

   npm i --save-dev @babel/preset-env，报错参考

4. url-loader和file-loader两个库处理图片等

5. css-loader 和 style-loader库。前者可以让 CSS 文件也支持 import，并且会解析 CSS 文件，后者可以将解析出来的 CSS 通过标签的形式插入到 HTML 中，所以后面依赖前者。

6. 使用 extract-text-webpack-plugin 插件将 CSS 文件打包为一个单独文件

   npm i -D extract-text-webpack-plugin@next

7. 分离代码

8. 抽取共同代码,使用 webpack 自带的插件 CommonsChunkPlugin,webpack4+删除了该插件，新增了优化后的SplitChunksPlugin，报错参考

9. clean-webpack-plugin删除不需要的文件，报错参考' CleanWebpackPlugin is not a constructor'

10. 每次新增 JS 文件我们都需要手动在 HTML 中新增标签，现在我们可以通过一个插件来自动完成这个功能，即是html-webpack-plugin，github

11. 按需加载代码,router

12. 自动刷新,安装webpack-dev-server

13. build生产环境代码，添加插件optimize-css-assets-webpack-plugin，UglifyJsPlugin，配置参考

14. 优化点：

vendor 这种常用的库我们一般可以使用 CDN 的方式外链进来。