该打包教程来源于“vue.js项目开发实战” 书

第一步:建立一个空白文件夹,然后在cmd进入到文件夹中输入 npm init -y,初始化javaScript工程,生成package.json文件 

第二步:安装webpack,接着输入 npm install  --save webpack

提示以上信息代表安装成功,并且自动生成  mode_modules文件夹(相关依赖包),同时在package.json中会自动增加webpack的最新版本

第三步:在package.json 中添加“bulid”:"webpack"(注意键值对的形式要用英文下的双引号,否则会报错,编译失败)

注意  如果不安装webpack-cli会提示报错,所以在第二安装webpack后  我们需要安装webpack-cli   

命令如下:npm install   --save webpack-cli

提示一下信息代表安装成功

然后新建一个src文件包含index.js(内容随便写,保证可以正常输出就可以)

第四步:打包 npm  run bulid  生成dist文件夹,打开dist下的main.js文件就是如下代码

扩展点:

npm  run dev和npm run production

dev当用户使用该模式的时候,会打包出包含注释和格式等未压缩状态的代码

production当用户使用该模式的时候,会打包出最小的压缩生产环境代码

具体配置在package.json中的scripts添加如下代码和添加bulid的方式一样

"dev":"webpack --mode development",

"production":"webpack --mode production"

这里面试的时候会问打包的时候去掉注释,你知道该怎么回答了吗?

相关文章: