webpack初始化以及静态资源的打包
- (项目地址D:\vueproject\webpack\webpack01)
- 在项目根路径下 npm init
- 安装webpack的脚手架
- npm i webpack webpack-cli -g(全局安装)
- npm i webpack webpack-cli -D(本地安装)
- 新建index.js —>webpack的入口文件
- 运行指令
- 开发环境:
webpack ./src/index.js -o ./build/built.js --mode=development
指令介绍: webpack会以./src/index.js为入口文件开始打包,打包输出到 ./build/built.js - eq:碰见的问题:出现系统禁止运行脚本
解决方法:以管理员权限运行powershell
输入(set-ExecutionPolicy RemoteSigned 输入A)
- 开发环境:
// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//webpack配置
//入口起点
entry: './src/index.js',
//输出
output: {
filename: 'built.js',
//输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
//loader的配置
module: {
rules: [
//loader的配置
{ //处理css文件
//匹配哪些文件
test: /\.css$/,
//使用哪些loader进行处理
use: [
//use数组中的loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进去,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容的样式是字符串
'css-loader'
]
},
{ //处理less文件
test: /\.less$/,
use: [ //使用多个loader用数组
'style-loader',
'css-loader',
//需要下载less-loader 和less
'less-loader'
]
},
{
// 处理图片资源
// 夏泽俩个包url-loader file-load,url-loader依赖file-loader
test: /\.(jpg|png|gif)$/,
loader: "url-loader",
// 配置
options: {
// 图片小于10kb,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度变慢)
limit: 10 * 1024,
// 问题url-loader默认使用es6,html-loader使用的是commonjs
// 解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false, //必须添加的参数
// 图片文件命名规则
name: "[hash:10].[ext]"
}
},
{
// 处理html文件中的img图片(负责引入img,从而能被url-loader进行处理)
test: /\.html$/,
loader: "html-loader",
options: {
esModule: false, //必须添加的参数
}
},
// {
// //打包其他资源(除了html,js,css资源以外的资源)
// //排除css/js/html资源
// excloud: /\.(css|html|js)$/,
// loader: 'file-loader'
// }
]
},
//plugins的配置
plugins: [
//详细plugins的配置
//html-webpack-pluging
//功能:默认会创建一个空的html,自动引入打包输出的所有资源(js/css)
//需求:需要有结构的html文件
new HtmlWebpackPlugin({ //需要上面引入html-webpack-plugin模块 ,npm i html-webpack-plugin -D
template: './src/index.html',
//template: 'html-withimg-loader!' + resolve(__dirname, './src/index.html'),
})
],
mode: 'development', //开发环境
//mode: 'production',//生产环境
//开发服务器 devServer :用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
//特点:只会在内存中编译打包,不会有任何输出
//启动devServer指令为: npx webpack serve(webpack5的命令)
//(npx webpack-dev-server webpack5以下版本的命令) 这个需要下载依赖( npm i webpack-dev-server -D)
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 9000,
// 自动打开浏览器
open: true
}
}
webpack构建环境介绍
1. 提取css成单独文件
- 下载插件:(npm i mini-css-extract-plugin -D)
2. css兼容性处理
- 处理css兼容性问题需要postcss—>postcss-loader
(postcss-loader)需要引入postcss-preset-env
下载插件:(npm i postcss-loader -D,
npm i postcss-preset-env -D) - 出现的问题(错误信息如下)
==ERROR in ./src/index.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap?, implementation? }
at validate (C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\node_modules\schema-utils\dist\validate.js:104:11)
at Object.getOptions (C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:502:19)
at Object.loader (D:\vueproject\webpack\node_modules\postcss-loader\dist\index.js:38:24)
at processResult (C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:676:19)
at C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:778:5
at C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at C:\Users\11209\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:251:18
@ ./src/index.js 1:0-21
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.35.1 compiled with 2 errors in 308 ms==
- 解决办法 对postcss-loader进行版本降级处理
命令如下
npm i postcss-loader@3.0.0 -D
3.压缩css
-下载插件(npm i optimize-css-assets-webpack-plugin -D)
还是在webpack.config.js下操作
需要引入这个插件
const { resolve } = require('path');
//引入html模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入生成css文件插件
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
//引入css压缩插件
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')
//设置nodejs的环境变量
//process默认是加载production环境,如果要设置开发环境需要手动配置
process.env.NODE_ENV='development'
module.exports = {
//webpack配置
//入口起点
entry: './src/index.js',
//输出
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
//'style-loader',
//这个loader取代style-loader将css抽取成单独文件
MiniCssExtractPlugin.loader,
'css-loader',
//css兼容性处理
/*
使用postcss默认配置
'postcss-loader'就可以,如果需要修改默认配置需要写成对象形式
属性options是修改默认配置的关键
postcss-preset-env帮postcss找到package.json中的browserlist里面的配置,通过配置加载指定的css兼容性样式
*/
{
loader:'postcss-loader',
options:{
ident:'postcss',
plugins:()=>[
require('postcss-preset-env')()
]
}
}
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.(jpg|png|gif)$/,
loader: "url-loader",
options: {
limit: 10 * 1024,
esModule: false, //必须添加的参数
name: "[hash:10].[ext]"
}
},
{
test: /\.html$/,
loader: "html-loader",
options: {
esModule: false, //必须添加的参数
}
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
})
,
new MiniCssExtractPlugin({
//对输出的文件重命名
filename:'css/built.css'
}),
//new 出对象就可直接压缩css
new OptimizeCssAssetsWebpackPlugin({})
],
mode: 'development', //开发环境
//mode: 'production',//生产环境
)
}
package.json中browserlist的写法
"browserslist":{
"development":[
"last 1 chrome version",//兼容最近1版本的谷歌
"last 1 firefox version",
"last 1 szfari version",
],
"production":[
">0.2%",//兼容99.8%的浏览器
"not dead",//不兼容死的浏览器
"not op_mini all"//不兼容op_mini浏览器
]
}
js语法检查 eslint
1 导入所需插件
- npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
2 js兼容性处理
- npm i babel-loader @babel/core @babel/preset-env -D
//webpack.config.js
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
/*语法检查 eslint-loader eslint
注意:只检查自己写的源代码,第三方的库是不用检查的
设置检查规则:
package.json中eslintConfig中设置,设置如下:
"eslintConfig":{
"extends":"airbnb-base"
}
airbnb---> eslint-config-airbnb-base eslint-plugin-import eslint
(eq:airbnb后面是所需到的插件,命令如下:npm i eslint-config-airbnb-base eslint-plugin-import eslint)
*/
{
test:/\.js$/,
exlude:/node-modules/,//排除node-modues下的所有js文件
{
loader:'eslint-loader',
options:{
//自动修复eslint的错误
fix:true
}
},{
loader:'babel-loader',
options:{
//预设:指示babel做怎么样的兼容性处理
presets:[
'@babel/preset-env',
{
//按需加载
useBuiltIns:'usage',
//指定core-js的版本
corejs:{
version:3
},
//指定兼容性做到哪个浏览器的版本
targets:{
chrome:'60',
firefox:'60',
ie:'9'
}
}
]
}
}
/*Js兼容性处理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性处理 -->@babel/preset-env
问题:只能转换基本语法,如promise高级语法不能转换
2.全部js兼容性处理---> @bable/polyfill
问题:我只要解决部分兼容性问题,但是这个会将所有兼容性代码全部引入,会造成体积过过大
3.需要做兼容性处理的就兼容:按需加载-->
core-js(这是插件)
*/
},
{//上面的写法不能写在一起,需要分开写,应为加载顺序不同
test:/\.js$/,
exlude:/node-modules/,//排除node-modues下的所有js文件
//优先执行
enforce:'pre',
loader:'eslint-loader',
options:{
//自动修复eslint的错误
fix:true
}
},
{
test:/\.js$/,
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env',
{
useBuiltIns:'usage',
corejs:{
version:3
},
targets:{
chrome:'60',
firefox:'60',
ie:'9'
}
}
]
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
})
],
mode: 'development', //开发环境
//mode: 'production',//生产环境
)
}
package.json文件的配置
"eslintConfig":{
"extends":"airbnb-base"
}
压缩html和js
- 生产环境下会自动压缩js
//html压缩如下配置
new HtmlWebpackPlugin({
template: './src/index.html',
minify:{
//移除空格
collapseWhitespace:true,
//移除注释
removeComments:true
}
})
本文介绍了如何在Vue项目中初始化Webpack,包括全局和本地安装,配置入口文件、开发环境打包,遇到的问题及解决方案。重点讲解了CSS提取、兼容性处理、压缩优化,以及ESLint和Babel配置。

被折叠的 条评论
为什么被折叠?



