什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
1.在cmd终端执行 npx webpack命令
2.在package.json文件同级建立webpack.config.js文件，内容如下：
?
|
1
2
3
4
5
6
7
8
9
|
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口
output: { // 出口
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 生成路径
}
};
|
执行命令 npx webpack --config webpack.config.js
3.修改package.json脚本
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \\"Error: no test specified\\" && exit 1",
+ "build": "webpack" // 修改命令执行方法
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
|
执行命令npm run build
结论：生成类似下面的目录，打开index.html 有Hello webpack显示
?
|
1
2
3
4
5
6
7
8
9
|
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules
|
总结
以上所述是小编给大家介绍的window启动webpack打包的三种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
原文链接：https://www.cnblogs.com/zhanyuefeixian/p/11912749.html
相关文章
猜你喜欢
- ASP.NET自助建站系统中如何实现多语言支持？ 2025-06-10
- 64M VPS建站：如何选择最适合的网站建设平台？ 2025-06-10
- ASP.NET本地开发时常见的配置错误及解决方法？ 2025-06-10
- ASP.NET自助建站系统的数据库备份与恢复操作指南 2025-06-10
- 个人网站服务器域名解析设置指南：从购买到绑定全流程 2025-06-10
