css压缩处理
css压缩主要用到的是optimize-css-assets-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
-
引入
var OptimizeCssAssetsPlugin = 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",
//如果是使用autoprefixer插件
options:{
postcssOptions:{
plugins:[require('autoprefixer')({
overrideBrowserslist:['last 2 versions','>1%',"ios 7"]
})]
}
}
- 使用postcss-preset-env的方法参考这篇博文 postcss-preset-env在webpack5中使用方法
// 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"
}
}
js兼容性处理
- 我们在进行兼容性处理之前，js代码中的const let等es6的语法，打包后还是const let会在ie等浏览器存在兼容问题
1.使用babel-loader进行兼容性处理
2.下载babel-loader @babel/preset-env @babel/core
注意： bable-loader一定要在8版本以上， @babel/preset-env @babel/core在以前的版本是 babel-preset-env babel-core会和8版本的babael-loader不兼容
const { resolve } = require("path");
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname,"build")
},
module:{
rules:[
//原则上一个文件只能被一个loader进行处理，但是js文件需要eslint也需要babel。那么此时就一定要注意书写顺序，一定要eslint在babel上面
//原因如下：1，eslint检查出错，下面的一切执行都没有意义了。2，babel会将es6转换成es5，var这些在eslint看来是错误
//可以给eslint-loader加一个配置enforce:"pre"
//loader的配置
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"]
}
}
]
},
mode:"development", //production'
}
至此，我们可以完成基本的je6转换为es5,比如const,let，箭头函数等。但是我们想要转换promise这些，就不能实现了。我们需要下载新的一个插件
全部js的兼容性处理：@babel/polyfill
在我们打包前的源码js中直接 import "@babel/polyfill"
*引用上面的插件会产生一个问题，就是打包后的文件体积过大，我们其实只是想处理部分兼容性问题，却引用了所有的兼容性处理包，需要做成按需====》core-js*
npm i core-js -D
使用这个插件之后，就不要再js中引入polyfill了
//webpack.config.js
const { resolve } = require("path");
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname,"build")
},
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [["@babel/preset-env",
{
//按需加载
"useBuiltIns": "usage",
corejs:{
version: 3
},
//指定兼容性做到那个浏览器版本
target: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10'
}
}
]]
}
}
]
},
mode:"development", //production'
}
扫一扫
1014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
