Webpack4.0 入门实践教程
Webpack是一个现代JavaScript应用程序的静态模块打包工具。它可以将许多模块按照依赖顺序打包成一个或多个文件。在我们开始使用Webpack之前,需要先安装Node.js与npm。
安装
npm install webpack webpack-cli --save-dev
Webpack分为多种模式,可以使用配置文件或者命令行参数选项进行设置。我们可以在package.json
中的scripts
字段中配置webpack命令:
"scripts": {
"build-dev": "webpack --mode development",
"build-prod": "webpack --mode production"
}
上述配置中,build-dev
是使用开发模式构建,在开发模式下会添加调试信息。build-prod
则是使用生产模式构建,此时会启用代码压缩。
基本配置
Webpack的默认入口文件是./src/index.js
,默认的出口文件是./dist/main.js
。
在./src/index.js
中,我们可以编写一些代码,例如:
alert("Hello, World!");
接着,在./dist/index.html
中引入main.js
文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack4.0</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
这样,我们就可以在浏览器中看到弹窗输出Hello, World!
了。
使用加载器
Webpack除了可以自动处理JavaScript模块,还可以支持处理其他非JavaScript模块,比如CSS、图片等资源。
处理CSS文件
首先,我们需要安装style-loader
和css-loader
。
npm install style-loader css-loader --save-dev
接着,在Webpack的配置文件webpack.config.js
中添加module
字段:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
}
]
}
};
最后,在入口文件进行引用即可:
import './style.css';
处理图片文件
首先,我们需要安装file-loader
和url-loader
。
npm install file-loader url-loader --save-dev
接着,在Webpack的配置文件webpack.config.js
中添加module
字段:
module.exports = {
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
};
这里的url-loader
可以将文件转换成base64编码放到CSS文件中,从而减少HTTP请求次数。
最后,在入口文件中引用图片:
import imgSrc from './img.png';
const img = document.createElement('img');
img.src = imgSrc;
document.body.appendChild(img);
总结
以上是Webpack入门实践的简单示例,当然Webpack还有更多更强大的功能,比如代码分离、懒加载、插件等。希望通过本教程的学习,能让大家对Webpack有更深刻的理解。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:webpack4.0 入门实践教程 - Python技术站