webpack常用的打包配置

webpack打包

webpack在项目根目录创建一个webpack.config.js文件

webpack.config.js

主要有五个属性

module.exports = {entry:"",output:{filename:"", // 输出的文件名path:"" // 文件输出的位置},module:{rules:{text:'正则表达式', // 处理匹配到的文件exclude:"", // 处理没有匹配到的文件exclude: /node_modules/, // 排除node_modules文件下的文件use:[ // 执行顺序从下到上 从右到左'css-loader',{ // 要对某一个loader进行详情配置时loader:"postcss-loader",options:{ }}], // 使用个loader时使用这个属性loader:"", // 假如只用到一个loader时可以用这个enforce:"pre", // 如果有多个loader同时处理这个表示先执行这个loader// 只有一个loader时就可以直接使用options对其进行配置options:{}}}, // 加载不同格式文件的方式plugins:[], // 加载不同的插件mode:"", // 环境 (development || production)// 这个是用来生成临时文件的服务// 需要安装webpack-dev-server// 命令：npm i webpack-dev-server -D// 开发服务器devserver：用来自动化// 特点：只会在内存中编译打包 不会有任何输出// 启动devServer指令为：npx webpack-dev-serverdevServer:{contentBase:resolve(__dirname, 'built'),// 启动GZIP压缩compress:true,// 端口号port:3000,// 自动打开浏览器open:true}
}

下面有打包css less html 字体文件 图片

css所需loader

style-loader、css-loader

module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader',],},]
}

less所需loader

要先安装less插件
style-loader、css-loader、less-loader

module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader','less-loader',],},]
}

字体文件和图片所需loader

file-loader、url-loader

module: {rules: [{test: /\.(jpg|png|gif|jpe1g)$/,use: [{loader: "file-loader",options: {// 图片小于8kb 就会被base64处理// 优点：能减少请求数量// 确定：图片体积会更大limit:102400,//  解析时出现[object Module]时配置esModule: false// name: utils.assetsPath('img/[name].[hash:7].[ext]'),// outputPath: "media/" 可以将文件输出到某个固定的目录}},{// exclude:/\.(css|js|html|jpg|png|gif|jpeg)$/, 这里是指排除这几种格式的文件test: /\.ttf$/,use: [{loader: "file-loader",options: {name: "[hash:4].[ext]",outputPath: "media/"}}]}],},]
}

html所需loader

html-loader

以某个html文件为模板输出

html-webpack-plugin

npm i html-webpack-plugin -D

const HtmlWebpackPlugin = require("html-webpack-plugin")
plugins:[new HtmlWebpackPlugin({template: "./index.html",minify:{// 移除空格collapseWhitespace:true,// 移除注释removeComment:true}}),
]

提取css成单独文件

一般在打包之后css会被直接混入js文件通过这个插件可以让css单独输出出来
mini-css-extract-plugin

npm i mini-css-extract-plugin -D

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const commonCssLoader = [MiniCssExtractPlugin.loader,'css-loader',
]
module: {rules: [{test: /\.css$/,use: [...commonCssLoader,]},{test: /\.less$/,use: [...commonCssLoader,'less-loader',]},}
},
plugins:[new MiniCssExtractPlugin({// 对输出的文件重命名filename:"css/built.css",})
]

css兼容

npm i postcss-loader postcss-preset-env -D

帮 postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

const commonCssLoader = [MiniCssExtractPlugin.loader,'css-loader',// css兼容性 需要在package.json中定义browserslist/*"browserslist": {"development": ["last 1 chrome vesion","last 1 firefox vesion","last 1 safari vesion"],"production": [">0.2%","not dead","not op_mini all"]}*/{loader: "postcss-loader",options: {postcssOptions: {plugins: [['postcss-preset-env',{ident: "postcss"},],],}}}
]
rules: [{test: /\.css$/,use: [...commonCssLoader,]
},
{test: /\.less$/,use: [...commonCssLoader,'less-loader',]
},]

package.json

"browserslist":{// 设置nodejs环境变量;// process.env.NODE_ENV = 'devlopment';// 开发环境 =》 设置node环境变量： process.env.NODE_ENV = devlopment"development":["last 1 chrome vesion", //兼容最近的一个chrome"last 1 firefox vesion", //兼容最近的一个firefox"last 1 safari vesion", //兼容最近的一个safari],"production":[">0.2%","not dead","not op_mini all"]
}

压缩css

optimize-css-assets-webpack-plugin

npm i optimize-css-assets-webpack-plugin -D

const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
plugins:[new optimizeCssAssetsWebpackPlugin()
]

js兼容性处理

1、 js兼容性处理：babel-loader @babel/preset-env @babel/core
还是不支持 promise

2、 全部js兼容性处理 --> @babel/polyfill
使用方式 import “@babel/polyfill”

3、 需求做兼容性处理的就做 ： 按需处理 --》 core-js

使用之后就可以把上面import "@babel/polyfill"删掉了
一般是1和3结合使用
babel-loader @babel/preset-env @babel/core @babel/polyfill

module:{rules:[{test:/\.js$/,exclude:/node_modules/,loader:"babel-loader",options：{// 预设：指示babel做怎么样的兼容性处理// presets:['@babel/preset-env']presets:[['@babel/preset-env',{// 按需加载useBuiltIns: 'usage',// 指定core-js版本corejs: {version: 3},targets: {chrome: "60",firebox: "60",ie:'9',safari: '10'}}]]}}]}

js 设置 eslint语法校验 使用 airbnb

所需插件
eslint eslint-config-airbnb-base eslint-loader eslint-plugin-import

{test: /\.js$/,exclude: /node_modules/,// 优先执行enforce: "pre",loader: "eslint-loader",options: {// 对js语法规范自动修复fix: true}
},

在package.json中添加

"eslintConfig": {"extends": "airbnb-base"
}

完整文件

{test: /\.html$/,// 处理html文件中img图片loader: "html-loader"
},

const {resolve
} = require("path");process.env.NODE_ENV = 'production'; // 打包的环境const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 压缩cssconst OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); // css兼容性const HtmlWebpackPlugin = require("html-webpack-plugin"); // html插件const commonCssLoader = [MiniCssExtractPlugin.loader,'css-loader',// css兼容性 需要在package.json中定义browserslist/*"browserslist": {"development": ["last 1 chrome vesion","last 1 firefox vesion","last 1 safari vesion"],"production": [">0.2%","not dead","not op_mini all"]}*/{loader: "postcss-loader",options: {postcssOptions: {plugins: [['postcss-preset-env',{ident: "postcss"},],],}}}
]
module.exports = {entry: './index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'built')},module: {rules: [{test: /\.css$/,use: [...commonCssLoader,]},{test: /\.less$/,use: [...commonCssLoader,'less-loader',]},/*正常来说 一个文件只能被一个loader处理当一个文件要被多个loader处理,那么一定要制定loader执行的先后顺序先执行eslint 再执行babel可以对其中一个loader添加一个属性 enforce:"pre"*/// js 设置 eslint语法校验 使用 airbnb/*在package.json中添加"eslintConfig": {"extends": "airbnb-base"}*/// {//     test: /\.js$/,//     exclude: /node_modules/,//     // 优先执行//     enforce: "pre",//     loader: "eslint-loader",//     options: {//         // 对js语法规范自动修复//         fix: true//     }// },// js兼容性处理{test: /\.js$/,exclude: /node_modules/,loader: "babel-loader",options: {presets: [['@babel/preset-env',// 1、兼容部分语法 不包括promise// 2、全部js兼容性处理 -->  @babel/polyfill  使用方式 import "@babel/polyfill"// 3、 需求做兼容性处理的就做 ： 按需处理 --》 core-js 使用之后就可以把上面import "@babel/polyfill"删掉了// 这里用的是1和3{// 按需加载useBuiltIns: 'usage',// 指定core-js版本corejs: {version: 3},targets: {chrome: "60",firefox: "60",ie: '9',safari: '10',edge: '17'}}]]}},// {//     test: /\.(jpg|png|gif|jpeg)$/,//     loader: 'url-loader',//     options: {//         limit: 8 * 1024,//         name: "[hash:10].[ext]", // 图片名称//         outputPath: 'imgs', // 图片输出的目录//         esModule: false, // 防止html中直接引用的图片链接错误//     }// },{test: /\.html$/,loader: "html-loader",},// {//     exclude: /\.(jpg|png|gif|jpeg|html|js|less|css)$/,//     loader: 'file-loader',//     options: {//         outputPath: 'media', // 这些文件的输出目录//     }// }]},plugins: [new MiniCssExtractPlugin({filename: "css/built.css", // 将css从js中抽离出来}),new OptimizeCssAssetsWebpackPlugin(), // 压缩cssnew HtmlWebpackPlugin({template: "./index.html", // 输出的模板文件minify: {// 压缩htmlcollapseBooleanAttributes: true,// 去除注释removeComments: true,}})],mode: "production"
}

package.json

{"name": "webpackcs","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.6.0"},"devDependencies": {"@babel/core": "^7.14.8","@babel/preset-env": "^7.14.8","babel-loader": "^8.2.2","css-loader": "^6.0.0","eslint": "^7.31.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": "^10.0.1","mini-css-extract-plugin": "^2.1.0","optimize-css-assets-webpack-plugin": "^6.0.1","postcss-loader": "^6.1.1","postcss-preset-env": "^6.7.0","style-loader": "^3.1.0","webpack": "^5.44.0","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.2"},"browserslist": {"development": ["last 1 chrome vesion","last 1 firefox vesion","last 1 safari vesion"],"production": [">0.2%","not dead","not op_mini all"]}
},
"eslintConfig": {"extends": "airbnb-base"
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！