详解window启动webpack打包的三种方法
什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
1.在cmd终端执行npxwebpack命令
2.在package.json文件同级建立webpack.config.js文件，内容如下：
constpath=require('path');
module.exports={
entry:'./src/index.js',//入口
output:{//出口
filename:'bundle.js',//文件名
path:path.resolve(__dirname,'dist')//生成路径
}
};
执行命令npxwebpack--configwebpack.config.js
3.修改package.json脚本
{
"name":"webpack-demo",
"version":"1.0.0",
"description":"",
"main":"index.js",
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1",
+"build":"webpack"//修改命令执行方法
},
"keywords":[],
"author":"",
"license":"ISC",
"devDependencies":{
"webpack":"^4.0.1",
"webpack-cli":"^2.0.9",
"lodash":"^4.17.5"
}
}
执行命令npmrunbuild
结论：生成类似下面的目录，打开index.html有Hellowebpack显示
webpack-demo |-package.json |-webpack.config.js |-/dist |-bundle.js |-index.html |-/src |-index.js |-/node_modules
总结
以上所述是小编给大家介绍的window启动webpack打包的三种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。