1. 为什么使用webpack?
随着JavaScript语言的发展,ES6 引入了模块化,ES6 的模块化分为export与import两个模块, 因为浏览器不能直接识别es6模块化语法,比如html文件直接引入模块化语法文件结果:
count.js:
export default function count(x, y) {
return x*y;
}
main.js
import count from "./js/count";
console.log(count(4,5));
直接引入index.ml
<body>
<h1>webpack实践</h1>
<script src="../pack/main.js"></script>
</body>
解析错误:
这个时候就需要使用webpack来打包编译文件,才能在浏览器使用我们的代码
2. webpack下载使用
webpack有开发模式development和生产模式production,开发模式下只能编译模块化语法,下载webpack的包就可以进行打包:
使用npm init -y 初始化包描述文件package.json:
使用 npm i webpack webpack-cli -D下载命令生成package-lock.json,就可以进行打包了
使用 npx webpack ./pack/main.js --mode=development 进行打包,生产打包文件dist:
index.ml路径替换成打包后文件,浏览器就可以编译了
<body>
<h1>webpack实践</h1>
<script src="../dist/main.js"></script>
</body>
3. webpack配置文件
为了打包更多的资源,需要通过webpack配置文件来配置
配置文件主要包含webpack的五大核心概念的配置
在当前目录创建webpack.config.js配置文件:
webpack.config.js:
const path = require("path"); //node.js处理路径模块
module.exports = {
// 入口
entry: "./pack/main.js", //路径
// 输出路径
output: {
// __dirname node.js的变量 当前文件目录
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
// 加载器
module: {
rules:[
// loader配置
]
},
// 插件
plugins: [
// plugin配置
],
// 模式
mode: "development",
}
通过这个配置文件的基本配置,执行npm webpack进行打包,会根据我们配置的内容进行查找和打包因为没有其他资源配置,所以当前效果和前面的操作是一样的:
4. webpack处理样式和资源
webpack中文文档
loaders文档
要处理样式资源我们要先去webpack文档找到loaders文档,查看文档需要使用的版本以及我们需要的loader资源包,进行下载
1.处理css资源
我们首先需要先安装style-loader、 css-loader:
npm install --save-dev style-loader
npm install --save-dev css-loader
配置webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/, // 只检测.css文件
use: [//use可以使用多个,loader只能用一个
// 执行顺序:从右到左(从下到上)
"style-loader", // 将js中css通过创建style标签添加html文件中生效
"css-loader", // 将css资源编译成commonjs的模块到js中
],
},
],
},
};
然后在main.js引入我们的css资源文件:
import "./css/index.css";
修改html应用:
<body>
<div class="box1"></div>
<script src="../dist/static/js/main.js"></script>
</body>
然后运行就会把我们的css资源打包到了js里面,我们就可以看到样式。
同样的我们可以处理less和sass的资源:
下载less-loader、sass-loader:
npm install less less-loader --save-dev
npm install sass-loader sass webpack --save-dev
添加资源配置webpack.config.js:
{
test: /\.less$/,
// loader: 'xxx', // 只能使用1个loader
use: [
// 使用多个loader
"style-loader",
"css-loader",
"less-loader", // 将less编译成css文件
],
},
{
test: /\.s[ac]ss$/,
use: [
"style-loader",
"css-loader",
"sass-loader", // 将sass编译成css文件
],
},
在main.js引入我们的资源文件就可以编译使用了,类似的还有stylus-loader,参考文档就可以进行配置使用,实践项目中一般只使用一种合适的。还有babel-loader可以处理js文件兼容老的浏览器。
2.处理图片资源
可以通过webpack把小图片转化base64,用来减少请求数量,直接配置webpack.config.js:
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: "asset",
parser: {
dataUrlCondition: {
// 小于10kb的图片转base64
// 优点:减少请求数量 缺点:体积会更大
maxSize: 10 * 1024, // 10kb
},
},
generator: {
// 输出图片名称
// [hash:10] hash值取前10位
filename: "static/images/[hash:10][ext][query]",
},
}
在output的配置加上clean: true,可以清空掉上次打包的文件。
3.处理字体图标和其他资源
{
test: /\.(ttf|woff2?|map3|map4|avi)$/,//文件类型
type: "asset/resource",
generator: {
// 输出名称
filename: "static/media/[hash:10][ext][query]",
},
}
4处理eslint
在webpack5,eslint换成插件使用,文档找到eslint插件配置,插件属于构造函数,可以用new进行引用
下载完成之后添加配置:
// 插件
plugins: [
// plugin的配置
new ESLintPlugin({
// 检测哪些文件
context: path.resolve(__dirname, "../src"),
})
],
新建一个eslint.js文件,添加eslint配置,然后下载eslint工具,就可以帮我们检查代码了:
类似插件引用还有HtmlWebpackPlugin插件,用来处理html资源,可以使用HtmlWebpackPlugin插件来自动引入资源:
plugins: [
new HtmlWebpackPlugin({
// 模板:以public/index.html文件创建新的html文件
// 新的html文件特点:1. 结构和原来一致 2. 自动引入打包输出的资源
template: path.resolve(__dirname, "../public/index.html"),
}),
],
5. 代码热更新重新打包
1.下载包
npm i webpack-dev-serve -D
然后进行配置
// 开发服务器: 不会输出资源,在内存中编译打包的
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
使用npx webpack serve进行打包,就可以实现修改自动更新。
6. 开发和生产环境处理
开发环境和生产环境可以分成两个配置文件,修改文件路径,并修改启动路径文件,就可以自定义需要的环境配置需求文件。
一般情况下,开发环境不需要output.path不需要输出,生产环境不需要devServer配置。
生产环境处理可以使用postcss-loader处理css兼容,MiniCssExtractPlugin,CssMinimizerWebpackPlugin,进行优化和压缩css
生产模式是默认压缩html和js的。