故心故心故心故心小故冲啊
前面
- 装载器loader(加载):
- css-loader, less-loader, babel-loader, style-loader
- MiniCssExtractPlugin.loader
- 插件plugin(加工):
- optimize-css-assets-webpack-plugin
- terser-webpack-plugin
- html-webpack-plugin
- mini-css-extract-plugin
全局变量
-
jquery $ 遍历dom
-
工具:underscord lodash(防抖节流)
-
在每一个组件中都可以使用它 import $ from ‘jquery’;
-
使用全局变量 可以直接在组件中使用 webpack.ProvidePlugin
-
导入前 打包的文件11.9k 导入后 334k 影响加载速度
-
把三方的包排除去(前面讲vuecli打包), 需要在html手动添加依赖包
-
把三方的包拆开好处:1.分开加载 2.缓存
图片处理(三种方式)
- 在js中加载图片 需要file-loader
(默认使用es6模块化, 通过配置esModule:false改成commonjs模块化) - 通过css加载
- 需要html直接作用 需要html-withimg-loader
html-withimg-loader需要配合file-loader使用并且不能够使用es6模块化 - 若图片很多,每一张图片都需要一个http请求
- 可以把小图片转成base64, 减少http请求,可以使用url-loader
模块化
- node commonjs
- es6 模块化
es6模块化有一个default,表示默认对象, import表示导入默认对象
样式兼容性
- css3,先实现自己的-webkit-xxxx, 所有的都实现了,可以去掉前缀
- 兼容性插件就是给样式自动添加前缀
- 需要postcss-loader, 在根目录添加postcss.config.js,
还要在package.json配置browserslist
//自定义webpack
let path = require('path'); //path node
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
let HtmlWebpackPlugin = require("html-webpack-plugin");
let TerserPlugin = require('terser-webpack-plugin');
let OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin')
let webpack = require("webpack")
module.exports = { //node模块化的写法
optimization: {
minimizer: [new TerserPlugin({}), new OptimizeCssPlugin({})]
},
entry: "./src/index.js", //入口
mode: 'development', //开发 发布production
output: { //出口
filename: "index.js", //指定输出名字
//node __dirname 当前目录
path: path.resolve(__dirname, "dist") //指定输出目录
},
devServer: { //web服务配置
port: 8081,
open: true, //服务启动时自动打开默认浏览器
progress: true, //进度条
contentBase: './dist' //http容器的根目录
},
module: {
rules: [
{
test:/\.html$/,
use: 'html-withimg-loader'
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader',
options: {
esModule: false,
limit: 200*1024 //小于800kb图片都转成base64
}
}
// use: {
// loader: 'file-loader',
// options: {
// esModule: false
// }
// }
},
{
test: /\.js$/,//处理以js文件结尾
use: {
loader: 'babel-loader',
options: {
presets: [ //babelrc
"@babel/preset-env"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
}
},
{
test: /\.css$/, //以css结尾的文件
// use: ['style-loader', 'css-loader'] //装载器loader
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
},
{
test: /\.less$/,
// use: ['style-loader', 'css-loader', 'less-loader']
use: [MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'less-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', //模板
filename: 'index.html', //打包后模板名字
}),
new MiniCssExtractPlugin({
filename: 'index.css' //抽出css的文件名
}),
new webpack.ProvidePlugin({ //每个组件中注入
$: 'jquery'
})
],
externals: { //打包时忽略
jquery: '$'
}
}