清除上次打包的东西clean-webpack-plugin
为什么要清理/dist文件夹?
如果在多次打包后, 我们的 /dist
文件夹显得相当杂乱。webpack 将生成文件并放置在 /dist
文件夹中,但是它不会追踪哪些文件是实际在项目中用到的。
通常比较推荐的做法是,在每次构建前清理 /dist
文件夹,这样只会生成用到的文件。让我们实现这个需求。
clean-webpack-plugin
是一个流行的清理插件,安装和配置它。
1 | npm install clean-webpack-plugin -D |
webpack.config.js
1 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') |
现在,执行 npm run build
,检查 /dist
文件夹。如果一切顺利,现在只会看到构建后生成的文件,而没有旧文件!
CopyWebpackPlugin
it is to copy files that already exist in the source tree, as part of the build process.
将开发环境下的目录复制到生产环境下。因为如果你需要在代码中引入静态资源文件。如果你对url的引入是相对地址
1 | <img class="logoIcon" src="../../assets/logo.png"/> |
在打包后部署到线上环境(npm run build) 或者在开发环境(npm run dev)下 会找不到资源的路径。因为打包后的目录与开发时的目录将会发生很大的变化。所以不能找到资源路径。
webpack.config.js
1 | const CopyWebpackPlugin = require('copy-webpack-plugin') |
现在所有静态资源只要通过/assets/xx就能访问
1 | <img class="logoIcon" src="/assets/logo.png"/> |
vue打包抽离css
如果嫌弃打包的bundle太大了,想要把css从里面抽离出来。就要用mini-css-extract-plugin了
1 | npm install mini-css-extract-plugin -D |
webpack.config.js
1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') |
打包生成的文件 会发现.vue文件里的css被单独抽离出来了
可视化分析bundle.js资源的webpack插件
webpack-bundle-analyzer,可以清晰的看到项目中一共有多少个包,包的体积是多少,里面加载了哪些东西,大小是多少。
作用 : 将bundle.js中捆绑的资源大小及关系,用交互式可缩放树形图直观的表示出来,从而有助于知道各资源的大小及关系,并进行优化。
效果图如下:
webpack-bundle-analyzer安装和使用
1 | npm install webpack-bundle-analyzer -D |
webpack.config.js
1 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin |
BundleAnalyzerPlugin构造函数中可配置的对象:
1 | new BundleAnalyzerPlugin({ |
sourceMap
Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。
在实际开发过程中,我们在使用webpack打包的时候,打包完成的bundle.js报错信息是很难Debug的,这时候就需要Source Map
来还原真实的出错位置。
有了sourceMap,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。
不然浏览器会定位到压缩过后的代码。无法准确的定位到错误位置
webpack.config.js
1 | module.exports = { |
注意
以上选项通常用于开发环境中:
在生产环境中最好关闭devtool,因为这样可以极大的减小打包的体积。
生产环境下: (none)
(省略 devtool
选项) - 不生成 source map。这是一个不错的选择。
proxy
webpack开发配置API代理解决跨域问题-devServer
设置代理的前提条件:
1、需要使用本地开发插件:webpack-dev-server。
2、webpack-dev-server使用的是http-proxy-middleware来实现跨域代理的。
1.一个webpack配置信息:
1 | module.exports = { |
2. 配置中主要的参数说明
2.1 ‘/api’
捕获API的标志,如果API中有这个字符串,那么就开始匹配代理,
比如API请求/api/users
, 会被代理到请求 http://www.baidu.com/api/users 。
2.2 target
1 | 代理的API地址,就是需要跨域的API地址。 |
2.3 pathRewrite
路径重写,也就是说会修改最终请求的API路径。
比如访问的API路径:/api/users
,
设置pathRewrite: {'^/api' : ''},
后,
最终代理访问的路径:http://www.baidu.com/users
,
这个参数的目的是给代理命名后,在访问时把命名删除掉。
2.4 changeOrigin
这个参数可以让target参数是域名。
2.5 secure
secure: false
,不检查安全问题。
设置后,可以接受运行在 HTTPS 上,可以使用无效证书的后端服务器
附完整的webpack.config.js
1 | const path = require('path') //path是Nodejs中的基本包,用来处理路径 |