前端工程化的具体解决方案
提供了友好的前端模块化开发支持,以及代码压缩混淆,处理浏览器端javascript的兼容性,性能优化等强大的功能。
-
在项目中安装webpack以及webpack-cli
-S是- -save的简写,安装路径节点在dependencies(在dependencies中是项目开发和上线阶段都在使用的依赖)。
-D是- -save-dev的简写,安装路径节点在devDependencies(只在开发阶段使用的依赖)。
webpack可以解决兼容性问题,在webpack.config.js的webpack的配置文件中,mode指定了构造模式,development是开发模式,production是上线模式。在package.json的scripts节点下,新增dev脚本 -
使用Vue脚手架构建项目
1.打开控制台,安装Vue脚手架
2.安装cnpm
3.查看Vue版本,确认是否安装成功
4.在项目所需要放置的文件目录下打开控制台,输入:
初始化项目(此处的my-project为项目名称,使用驼峰命名法也可以)
5.模板下载完成后vue-cli将引导我们进行项目配置
6.cnpm install 安装项目依赖
7.npm start (开发版本) npm run build (生产版本) -
webpack使用webpack.config.js配置文件(自定义打包的入口与出口,不借助webpack-cli)
1.默认打包入口文件为src目录下的–>index.js
2.默认文件的输出路径为dist文件下的–>main.js
在webpack.config.js配置文件中,通过entry节点指定打包的入口,通过output节点指定打包的出口
-
常用插件的安装和配置
1.webpack-dev-server
类似于node.js时用到的nodemon工具,每当修改了源代码,webpack会自动进行项目的打包和构建
修改package.json–>scripts中的dev命令如下,通过 npm run dev 重新进行项目的打包
webpack-dev-server实时打包的工作原理(修改源代码以后,监听到源代码的改动,实时打包编译,生成的文件放在内存里)2.html-webpack-plugin
webpack中的html插件(类似于一个模板引擎插件),可以通过插件自定义index.html页面的内容
在webpack.config.js中配置指定的页面复制一份放在根目录里面
了解html-webpack-plugin插件的特性
把指定目录下的页面放在项目的根目录里面去,若修改index.html中的js文件,复制出的页面中会自动注入未修改的js的脚本。 -
了解devServer中常用的选项
devServer节点:
在webpack.config.js配置文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置(自定义),示例代码如下:
注:凡是修改了webpack.config.js配置文件,或者修改了package.json配置文件,必须重启实时打包的服务器,否则最新配置无法生效- vue-cli构建的项目目录下,在config文件下的index.js中
在http协议中,如果端口号是80,可以省略端口号
- vue-cli构建的项目目录下,在config文件下的index.js中