【WebPack】引入Vue;认识Plugin;使用uglifyjs丑化JS代码;搭建本地服务器;生产开发环境配置文件的抽离

Vue实战 - 配套源码

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
npm install --save-dev vue-loader vue-template-compiler

可能会报错如下:
在这里插入图片描述
以上报错解决方式:修改版本^13.0.0,然后重新npm install
在这里插入图片描述

认识Plugin

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

丑化JS代码:使用uglifyjs

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用npm run dev运行服务器,而不是使用webpack-dev-server,因为只要是在终端敲的命令,都是去全局找。而我们是在局部安装的服务器。

配置文件的抽离

把原来的一个配置文件拆分成三个配置文件(生产环境/开发环境配置分离,把公共部分抽到base中)
在这里插入图片描述
在这里插入图片描述
安装依赖:npm install webpack-merge --save-dev
--save-dev表示是开发时依赖

抽离之后,为了避免找不到配置文件,需要修改package.json如下:
在这里插入图片描述
在这里插入图片描述

知道怎么分离配置文件之后,读脚手架的配置可能会容易一点…

发布了610 篇原创文章 · 获赞 232 · 访问量 23万+

猜你喜欢

转载自blog.csdn.net/sinat_42483341/article/details/104148250