引导者本文目录一览：
- 1、打包优化去掉console.log,webpack.js配置排除打包瘦身
- 2、vue.config.js常用配置
- 3、webpack3和4的区别
- 4、mini-css-extract-plugin
打包优化去掉console.log,webpack.js配置排除打包瘦身
1、例如：让 webpack 不打包 vue xlsx 和 element先找到 vue.config.js ， 添加 externals 项，具体如下：再次运行打包，我们会发现包的大小已经大幅减小： 三个包已经不在打包的目标文件中了。
2、通过 DllPlugin 插件分离出第三方包 使用 add-asset-html-webpack-plugin 动态添加 dll.js 到 html 。需要注意 项目经过以上优化，打包从 30 分钟，到 2 分钟不到，整体还有优化空间，可以使用其他 cdn 等优化方式。
3、优化resolve.extensions 配置 在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在。
4、尽量用较新的版本，新版本相较之前都会有一定的性能提升和优化，包括Node和Webpack。
vue.config.js常用配置
1、客户端无需做任何配置。 修改config/index.js /vue.config.js文件（改完之后千万记得要重新 npm run dev）host 将webpackoptimization他webpackoptimization的值修改为 0.0.0.0，代表可以访问本机所有的IP地址，让vue项目可通过localhost和IP同时访问。
2、x初始化项目后没有webpackoptimization了build和config文件，如果webpackoptimization你想对webpack相关内容进行配置，需要自己在根目录下(与package.json同级)创建一个vue.config.js文件，这个文件一旦存在，那么它会被 @vue/cli-service 自动加载。
3、https：// ，则设置 publicPath 为 /my-app/。这个值在开发环境下同样生效。
4、对于新版本的vue，需要新增vue.config.js，并添加如下配置，产生的效果是一样的 其实用 相对路径 来解决这个问题不是最好的方案，甚至 vue-clix 之后，就不支持将 publicPath 设置为 ./ 了。
webpack3和4的区别
1、之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。
2、支持的React版本不同：create-react-app 0支持React 19及以下版本，而create-react-app 0支持React 17及以上版本。
3、webpack.config.js 要手动生成，webpack4 默认 entry 为 src/index.js，默认 output 为 dist/main.js。默认的意思就是你不写 entry，output 他就会自动适配，当然 src/index.js 是要手动创建的。
4、二者的区别仅在于 webpack-dev-server 是封装好的，除了 webpack.config 和命令行参数之外，很难去做定制型开发。而 webpack-dev-middleware 是中间件，可以编写自己的后端服务然后把它整合进来，相对而言比较灵活自由。
mini-css-extract-plugin
1、mini-css-extract-plugin 在 webpack4 中代替 extract-text-webpack-plugin webpackoptimization，此插件是 将 CSS 样式提取到单独的文件 中。 它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。即通过 JS 文件中 import 进来的样式文件。
2、mini-css-extract-plugin作用： 该插件的主要是为webpackoptimization了抽离 css 样式webpackoptimization，防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况。
3、因为antd不同组件可能会引入相同less文件会产生引入顺序问题。设置忽略顺序为true。
4、我出现这个错是因为extract-text-webpack-plugin可能不支持高版本webpack，我的webpack版本是4+。解决方法：使用mini-css-extract-plugin。这个插件同样可以让css打包成单独的css文件。
5、比如我们要使用 moment 这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。
