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-server
devServer:{
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'); // 压缩css
const 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(), // 压缩css
new HtmlWebpackPlugin({
template: "./index.html", // 输出的模板文件
minify: {
// 压缩html
collapseBooleanAttributes: 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"
}