- 指定打包文件
webpack --config webpack.config.deb.js - 开发服务器 webpbck-dev-server
- 插件 htmlwebplckplugin 打包html文件
- 样式loader于插件
1. less less-loader
2. css-loader
3.style-loader
4. mini-css-excract-plugin 抽离css插件
5.postcss-loader autoprefixer 加前缀
6. 压缩css 到(mini-css-excract-plugin 有教程) 用到optimize-css-assets-webpack-plugin和 terser-webpack-plugin
2 解析js
babel 都可以到babel官网中找
1、转化es6class @bable/plugin-proposal-class-properties
2、bable-loader @bable/core @bable-preset-env
image.png
处理es7
babel官网详解
js规则 eslint
npm install eslint eslint-loader
3 全局变量暴露给window
1、expose-loader 暴露到window上(两种方法如下图)
image.png
image.png
2、providerPlugin 给每个模块提供一个$
image.png3、引入不打包
image.png
打包图片资源
1、url-loader
配置大于多少的时候用base64的格式标识图片
2、file-loader
用于js文件导入图片
例如
import logn from './logn.png';
还有css种也是这种处理
3、html-withimg-loader
<img src="./logn.png">
这种格式需要用到
打包多页应用
image.png有用的小插件
image.png优化
image.pngimage.png
网友评论