Vue.js篇<3>-webpack
2018-12-26 本文已影响0人
xinmin
- npm的使用
- 需要先安装node，
-
npm install nrm使用nrm ls查看镜像的地址，nrm use npm或者nrm use cnpm可切换下载源的地址 -
npm install cnpm -g：安装cnpm，通过cnpm下载包 -
网页的静态资源
图片.png
-
webpack解决的问题
图片.png
-
使用webpack
图片.png
- 基本配置
在webpack.config.js中配置，打包路径，直接在控制台输入webpack即可完成打包
图片.png
图片.png
- 使用
webpack-dev-server来实现自动打包编译的功能
1.安装npm i webpack-dev-server -D这个工具到项目本地，作为开发依赖
图片.png
2.需要在package.json中配置，直接npm run dev运行，就会以服务器的形式打开，保存后就会自动编译
图片.png
3.还可在package.json中配置自动打开浏览器
图片.png
4、配置打开端口，默认8080
图片.png
5、配置内容根路径，热更新
图片.png
- 安装
npm i html-webpack-plugin -D插件，根据我们的html在内存中生成html页面
1.在webpack.config.js中配置
1.1 导入包
图片.png
1.2 在module.exports中配置插件
图片.png
当使用了html-webpack-plugin之后，我们不需要手动处理bundle.js的引用路径了，因为这个插件，已经帮我们自动创建了一个合适的 script，并且 ，引用了正确的路径 - 处理css文件，需要使用
npm i style-loader css-loader -D安装loader
1.直接在main.js中引入是不可以行的
图片.png
2.在webpack.config.js中配置
图片.png
webpack处理第三方文件的过程
图片.png
处理less: 安装less：npm i less -D、安装loader：npm i less-loader -D
定义规则：
图片.png
- 处理图片：
npm i url-loader file-loader -D
图片.png
图片默认会转换成base64编码，可用limit来约束，后面是对显示名称的约束
图片.png
- 引入bootstrap等第三UI库
1.在main.js中引入
图片.png
2.如需使用字体图标，需要在webpack.config.js中配置
图片.png
