珠峰webpack学习记录

• 指定打包文件
  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.png

3、引入不打包

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.png

image.png