webpack学习（一）
css压缩处理
css压缩主要用到的是optimize-css-assets-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
-
引入
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); = require('optimize-css-assets-webpack-plugin'); -
plugins中new
new OptimizeCssAssetsPlugin()
js的eslint
- 语法检查用到的是eslint-loader==》依赖eslint (npm install这两个)
- 只检查自己写的源代码，第三方库自己检查过了，我们不需要检查。而且eslint只针对js,
所以我们用exclude排除node_modules - 需要我们自己设置检查规则，在package.json中的eslintConfig中设置：aribnb(一个js风格指南)
“eslintConfig”: {
“extends”: “airbnb-base”
} - airbnb=>eslint-config-airbnb-base eslint eslint-plugin-import
webpack.config.js
// 当运行webpack时，会加载这个文件中色配置，指示webpack怎么干活
const { resolve } = require("path"); // nodejs的一个模块 resolve用来拼接绝对路径
// 自动生成html的插件-根据模板页面生成新的页面
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除之前打包的文件
var CleanWebpackPlugin = require('clean-webpack-plugin');
//这个插件可以把css单独打包成一个文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 设置一下node环境变量一下
process.env.NODE_ENV = "development"
//所有构建工具都是基于nodejs平台运行的，使用commonjs
module.exports = {
//入口文件
entry:"./src/index.js",
//输出文件
output:{
//输出文件名
filename: "main.js", //filename:"js/main.js" 就会将文件打包到js目录下的main.js
//输出路径
//_dirname是nodejs变量，代表当前文件（即webpack.config.js）的绝对路径 __dirname就是module-A
path:resolve(__dirname,"build")
},
//loader的配置
module: {
rules:[
// 语法检查： eslint-loader eslint
// 注意：只检查自己写的源代码，第三方库自己检查过了，我们不需要检查。而且eslint只针对js,
//所以我们用exclude排除node_modules
//需要我们自己设置检查规则，在package.json中的eslintConfig中设置：aribnb(一个js风格指南)
// "eslintConfig": {
// "extends": "airbnb-base"
// }
//airbnb=>eslint-config-airbnb-base eslint eslint-plugin-import
{
test: /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/,
options: {
//eslint检查出现的错误，通过fix：true会自动修复
//此时一些本来红色的报错就会消失，会有一些黄色的警告
//比如console，可以通过 //eslint-disable-next-line 不进行eslint检查
fix: true
}
},
//详细loader配置
{
//test 通常用正则表达式，表示匹配那些文件
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader:"postcss-loader",
options: {
// ident: 'postcss',
postcssOptions: {
plugins: [
require("postcss-preset-env")(),
]
} //postcss的插件
}
}
]
},
{
test: /\.(jpg|png|gif)$/,
//下载 url-loader和file-lodaer,因为url-loader依赖file-loader
loader:"url-loader",
options:{
//图片大小小于 8kb 会base64处理
//base64优点：减少请求数量（减轻服务器压力） 缺点：体积会变大，文件请求速度变慢
// 8-12kb以下的图片用base64处理
limit: 8*1024,
//打包后图片的名字是hash值，所以[hash: 10]表示取前十位hash,
//ext表示用原来的扩展名
name:'[hash:10].[ext]',
// //关闭es6模块化
esModule: false,
outputPath:"imgs" //会将打包后的图片放到imgs下
}
},
{
test: /\.html$/,
//专门处理html文件中的图片，负责引入图片，从而可以被url-loader处理
loader: 'html-loader',
options:{
//url-loader默认使用es6的模块化解析，html打包后引入的图片是commonjs引入
//解决：关闭url-loader的esModule
esModule:false,
}
},
]
},
plugins:[
//默认创建一个空的html，自动引入打包输出的所有资源(js/css)
//template会提供‘index.html’作为模板，将js资源用script引入，css用link引入
new HtmlWebpackPlugin({template: "./src/index.html"}),
new MiniCssExtractPlugin({filename:'css/main.css'}),
new OptimizeCssAssetsPlugin()
],
//模式
mode:"development", //production'
devServer: {
contentBase: resolve(__dirname,"build"), //代表要运行的项目的目录，构建后的项目路径
compress: true, //启动GZIP压缩，让代码体积更小
port: 3000, //端口
open: true, //是否默认打开浏览器
}
}
package.json
{
"name": "module-A",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.4",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.23.4",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"less": "^4.1.1",
"less-loader": "^8.1.1",
"mini-css-extract-plugin": "^2.1.0",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss": "^8.3.6",
"postcss-loader": "^6.1.1",
"postcss-preset-env": "^6.7.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.33.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
"ie > 6",
">1%",
"not dead",
"not op_mini all"
]
},
"eslintConfig": {
"extends": "airbnb-base"
}
}
