文章目录
webpack:js、css、es6装载与压缩配置-学习笔记
//package.json
{
"name": "01",
"version": "1.0.0",
"description": "- vuecli基于webpack建构的,有一些配置还需要直接使用webpack的配置项\r - 要完全掌握vuecli,必须掌握webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"less": "^3.11.3",
"less-loader": "^6.2.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^2.3.7",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"html-webpack-plugin": "^4.3.0"
}
}
css文件打包
- css怎么引入? 是在index.js引入, 因为webpack是以js为入口
- webpack默认不支持css打包,若要支持需要
css-loader
cnpm i -S css-loader
- 配置css-loader, 见webpack.config.js
- css-loader只是装载css文件,不会把装载后的文件整合到html上
- 需要整合到html上,需要
style-loader
, 作用:生成style
loader执行顺序
- 从右到左
- 从下到上
loader与plugin区别
- 装载器loader, 装载并转换(css,less)
- plugin, 文件的处理(压缩,混淆,合并等)
less
- less-loader 装载并把less语法转css
cnpm i -S less less-loader
css抽取
- 把css抽取出成一个单独的文件, style-loader是整合到html
mini-css-extract-plugin
js,css压缩处理
- js压缩plugin:
terser-webpack-plugin
- css压缩plugin:
optimize-css-assets-webpack-plugin
- 默认webpack支持js打包压缩(生产模式),添加optimize-css-assets-webpack-plugin后,
webpack的js打包压缩无效。就需要配置terser插件
依赖包降级处理
cnpm i -S xxx
默认安装最新版本cnpm i -S xxx@2
表示安装主版本为2的最新版本
es6打包支持
babel-loader
装载转换器(es6,es7,es8->es5)- nodejs部分支持es6
webpack.config.js文件:
//自定义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')
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: /\.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']
},
{
test: /\.less$/,
// use: ['style-loader', 'css-loader', 'less-loader']
use: [MiniCssExtractPlugin.loader,
'css-loader',
'less-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', //模板
filename: 'index.html', //打包后模板名字
}),
new MiniCssExtractPlugin({
filename: 'index.css' //抽出css的文件名
})
]
}