故心故心故心故心小故冲啊
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) ,
Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
Plugin可以扩展webpack的功能,让webpack具有更多的灵活性 - 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
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的文件名
})
]
}