webpack 4.X 基础编译
webpack4.x的打包已经不能用webpack 文件a 文件b
的方式,而是直接运行webpack --mode development
或者webpack --mode production
,这样便会默认进行打包,入口文件是'./src/index.js'
,输出路径是'./dist/main.js'
,其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。
因此我们不再按webpack 文件a 文件b
的方式运行webpack指令,而是直接运行
1 | webpack --mode production |
或者
1 | webpack --mode development |
这样便能够实现将'./src/index.js'
打包成'./dist/main.js'
。
也可以在package.json
中scripts
中加入两个成员:
1 2 3 | "dev" : "webpack --mode development" , "build" : "webpack --mode production" |
以后我们只需要在命令行执行npm run dev
便相当于执行webpack --mode development
,执行npm run build
便相当于执行webpack --mode production
。
我们在根目录执行:
1 | npm run dev |
附:package.json:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | { "name" : "StudyWebpack" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" , "dev" : "webpack --mode development" , "build" : "webpack --mode production" }, "keywords" : [], "author" : "" , "license" : "ISC" , "dependencies" : { "jquery" : "^3.3.1" }, "devDependencies" : { "webpack" : "^4.16.1" , "webpack-cli" : "^3.1.0" , "webpack-command" : "^0.4.1" } } |
总结:
1、webpack-cli必须要全局安装,否则不能使用webpack指令;
2、webpack也必须要全局安装,否则也不能使用webpack指令。
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
4、默认入口文件是./src/index.js,默认输出文件./dist/main.js。
步骤:
1、创建工程目录;
2、初始化工程目录:npm init。
3、全局安装webpack-cli。
4、全局安装webpack。
5、webpack –mode development/production进行打包,可在package.json中配置dev和build的脚本,便只需运行npm run dev/build,作用相同。
6、在webpack –mode development/production可串联设置其他参数。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步