Vuejs学习笔记(三)-2.webpack配置优化1-打包命令优化
一、优化点1:
之前是在命令行敲编译命令:webpack ./src/main.js -o ./dist/bundler.js,显示可以进行配置。
希望优化:只需要敲webpack命令,无需手动设置出口(打包成功后的文件)和入口(需要打包的文件)
步骤:
1.终端执行命令:npm init ,安装node基本依赖包,安装好以后会生成一个package.json文件
2.若package.json有依赖文件,则需要命令执行: npm install,且生成package-lock.json文件
3.配置webpack.config.js文件(名字不能写错)
在内部配置入口(entry)和出口(output)
4.命令行执行打包,只需要执行:webpack
二、优化点2
需求:不想敲webpack命令。而是使用 npm run build命令
步骤:
1.在package.json中配置scripts.build 为 webpack
2.在命令行执行:npm run build即可。
三、优化点3:
1.区别
前面2个优化点都是执行的webpack。但是有区别
优化点1用的是全局webpack,
优化点2会优先使用的是本地(局部)webpack,如果没有本地没有安装webpack就会去使用全局webpack
2.为什么要关注webpack版本
为什么要关注这个,因为webpack版本不同,对于特定的项目需要设置指定的webpack版本号。
实际情况是:全局webpack很少使用,一般都是用的本地webpack。
3.本地安装命令
so,本地安装webpack,安装命令:npm install webpack@3.6.0 --save-dev
为什么使用开发时依赖--save-dev,因为只有开发阶段需要打包,而生产环境不需要webpack,
安装成功后查看package.json文件,就会看到开发时依赖
检查点2,node_modules/webpack/package.json文件
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14973445.html