webpack5 之 css与js相关
目录
- webpack5 之 css相关
- 1:webpack5 之 css之加载、压缩、生成html
- package.json
- webpack.config.js
- main.js 与 main.css
- npm run build 打包效果
- 2:webpack5 之 scss使用
- package.json
- webpack.config.js
- main.js main.scss
- npm run build效果
- 3:webpack5 之 postcss、autoprefixer的配置 ( PostCSS自动补全浏览器前缀 )
- package.json
- webpack.config.js
- postcss.config.js
- main.js 与 main.scss
- npm run build 效果
- webpack5 之 js相关
- 1:webpack5 之 es6语法的转化
- package.json
- webpack.config.js
- babel.config.js
- main.js
- npm run build 效果
- 2:webpack5 之 js代码的压缩
- webpack.config.js ( TerserPlugin 自带的 )
- index.html
- npm run build 效果 ( 压缩js,去掉无用的js)
webpack5 之 css相关
1:webpack5 之 css之加载、压缩、生成html
package.json
"devDependencies": {
"style-loader": "^3.3.1",
"css-loader": "^6.5.1",
"mini-css-extract-plugin": "^2.5.3",
"css-minimizer-webpack-plugin": "^2.0.0",
"html-webpack-plugin": "^5.3.1",
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2"
},
webpack.config.js
const path = require('path')
const MiniCssExtract = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') //生产环境 进行压缩css
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动引入文件 插件
module.exports = (env) => {
return {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bunder.js',
},
// loader相关配置
module: {
rules: [{
test: /\.css$/, // 针对 .css 后缀的文件设置 loader
use: [
env.development ? 'style-loader' : {
loader: MiniCssExtract.loader
},
'css-loader'
]
}]
},
optimization: {
minimizer: [
// 压缩css - 生成环境
new CssMinimizerPlugin(),
// new TerserPlugin()
]
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
plugins: [
// 分割css
new MiniCssExtract({
filename: '[name].css',
chunkFilename: '[id].css'
}),
// 自动生成html ( 于打包后 dist目录下的 双击在浏览器显示 )
new HtmlWebpackPlugin({
// 打包输出HTML
title: '自动生成 HTML',
minify: {
// 压缩 HTML 文件
removeComments: true, // 移除 HTML 中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true // 压缩内联 css
},
filename: 'index.html', // 生成后的文件名
template: 'index.html', // 根据此模版生成 HTML 文件
// chunks: ['main'] // entry中的 app 入口才会被打包
}),
]
}
}
main.js 与 main.css
main.js
import "@/css/main.css"
console.log("main.js");
css / main.css
body{
background: yellow;
}
npm run build 打包效果
打开 dist / index.html 文件
2:webpack5 之 scss使用
package.json
"devDependencies": {
"node-sass": "^5.0.0",
"sass-loader": "^11.0.1"
},
webpack.config.js
const path = require('path')
const MiniCssExtract = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') //生产环境 进行压缩css
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动引入文件 插件
module.exports = (env) => {
return {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bunder.js',
},
// loader相关配置
module: {
rules: [{
test: /\.(scss|css)$/, // 针对 .scss 或者 .css 后缀的文件设置 loader
use: [
env.development ? 'style-loader' : {
loader: MiniCssExtract.loader
},
'css-loader',
'sass-loader' // 使用 sass-loader 将 scss 转为 css
]
}]
},
optimization: {
minimizer: [
// 压缩css - 生成环境
new CssMinimizerPlugin(),
// new TerserPlugin()
]
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
plugins: [
// 分割css
new MiniCssExtract({
filename: '[name].css',
chunkFilename: '[id].css'
}),
// 自动生成html ( 于打包后 dist目录下的 双击在浏览器显示 )
new HtmlWebpackPlugin({
// 打包输出HTML
title: '自动生成 HTML',
minify: {
// 压缩 HTML 文件
removeComments: true, // 移除 HTML 中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true // 压缩内联 css
},
filename: 'index.html', // 生成后的文件名
template: 'index.html', // 根据此模版生成 HTML 文件
// chunks: ['main'] // entry中的 app 入口才会被打包
}),
]
}
}
main.js main.scss
main.js
import "@/css/main.css"
import "@/css/main.scss"
console.log("main.js");
main.scss
$bgColor: red !default;
html {
p {
background-color: $bgColor;
}
.ppp {
display: flex;
justify-content: flex-end;
color: #fff;
background: #000;
}
}
npm run build效果
3:webpack5 之 postcss、autoprefixer的配置 ( PostCSS自动补全浏览器前缀 )
package.json
"devDependencies": {
"autoprefixer": "9.8.6",
"postcss-loader": "^6.1.0",
"postcss-px-to-viewport": "^1.1.1",
},
"browserslist": [
"> 1%",
"last 2 version",
"not ie <= 8"
]
webpack.config.js
// loader相关配置
module: {
rules: [{
test: /\.(scss|css)$/, // 针对 .scss 或者 .css 后缀的文件设置 loader
use: [
env.development ? 'style-loader' : {
loader: MiniCssExtract.loader
},
'css-loader',
'postcss-loader',
'sass-loader' // 使用 sass-loader 将 scss 转为 css
]
}]
},
postcss.config.js
module.exports = {
plugins: [require('autoprefixer')]
}
main.js 与 main.scss
main.js
import "@/css/main.css"
import "@/css/main.scss"
console.log("main.js");
main.scss
$bgColor: red !default;
html {
p {
background-color: $bgColor;
}
.ppp {
display: flex;
justify-content: flex-end;
color: #fff;
background: #000;
}
}
npm run build 效果
webpack5 之 js相关
1:webpack5 之 es6语法的转化
package.json
"devDependencies": {
"@babel/core": "^7.13.16",
"@babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",
"babel-plugin-import": "^1.13.3",
"webpack": "^5.67.0",
"webpack-cli": "^4.9.2"
},
"dependencies": {
"core-js": "^3.11.0"
},
webpack.config.js
// loader相关配置
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
},
},
exclude: /node_modules/
},
]
},
babel.config.js
const presets = [
["@babel/preset-env", {
"useBuiltIns": 'usage', // 这里配置usage 会自动根据你使用的方法以及你配置的浏览器支持版本引入对于的方法。
"corejs": "3.11.0" // 指定 corejs 版本
}]
]
const plugins = [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
module.exports = {
plugins,
presets
}
main.js
import "@/css/main.css"
import "@/css/main.scss"
console.log("main.js");
let a = 100;
console.log("a",a);
const set = new Set([1, 2, 3, 1])
console.log('res,', set, '; set-arr', [...set])
npm run build 效果
2:webpack5 之 js代码的压缩
webpack.config.js ( TerserPlugin 自带的 )
const TerserPlugin = require('terser-webpack-plugin');// js压缩
optimization: {
minimizer: [
// 压缩js - 生产环境
new TerserPlugin({
// 多进程
parallel: true,
//删除注释
extractComments: false,
terserOptions: {
compress: { // 生产环境去除console
drop_console: true,
drop_debugger: true,
},
},
}),
]
},
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./dist/css/style.css"> -->
</head>
<body>
<script src="./dist/bunder.js"></script>
<p>
我是p
<div class="ppp">我是ppp</div>
</p>
</body>
</html>
npm run build 效果 ( 压缩js,去掉无用的js)
- npm run build 效果
- npm run dev效果