前言:
拿到一个项目 , 生成默认package.json,可以执行npm init -y
package.json中dependencies和devDependencies的部分都会被安装,区别在于前者用于生产环境,后者用于开发环境
-g 表示全局安装,通常用于安装脚手架等工具
-save(-S) 表示本地安装,会被加至dependencies部分 eg: npm i jquery -S 安装jquery包
-save-dev(-D) 表示本地安装,会被加至devDependencies部分 eg: cnpm i webpack-dev-server -D (实现自动打包编译)
什么都不加也会安装,但是不会加至package.json中
开始:
拿到一个项目之后:::
- 第一步:
新建文件夹, 用 npm 的包管理工具 管理起来 ( 命令行输入 npm init -y ) 文件里出现 package.json
如果文件名有 中文 , 命令行输入 npm init 不需要 -y 回车 会重新让写一个名字
-
第二步:
创建两个 文件夹 src ( 存放项目源代码的 ) 和 dist ( 项目打包之后输出的文件放到dist里边 )
1. 在src 里 新建 index.html 项目首页
2. 然后 在src 里 建一个 main.js , 这是项目的 JS 入口文件
在 main.js 先console.log 一句话 接下来我们要 尝试着 把main.js 打包一下 然后 引入到 index.html 里面 ,看我们这个 能不能正常 打包 ( 命令行输入 webpack ./src/main.js ./dist/bundle.js ) → dist文件夹 有了 bundle.js
3. 如果 我们把 dist文件夹 删掉 命令行运行 webpack ./src/main.js ./dist/bundle.js 也会自动生成 dist文件夹
4. 在 index.html 用 script标签 引入 ../dist/bundle.js 运行浏览器右键查看 console.log出了 你好每次修改了一些代码 都需要手动重新运行 webpack ./src/main.js ./dist/bundle.js,体验不好 我们想要 自动打包 怎么办呢?
- 第一步:
安装工具 , ( 命令行 输入 cnpm i [email protected] -D ) 实现自动打包编译的 功能 - 第二步:
装完之后 , 需要在 项目根目录新建一个 webpack的 配置文件 叫 : webpack.config.js ( 装完之后, 命令行 提示 dev-server 依赖于 webpack, 需要项目本地 安装webpack ) - 第三步:
安装本地 webpack , ( 命令行输入 cnpm i [email protected] -D ) 此处 ,安装了指定webpack版本 , 避免与webpack-dev-server冲突
写一下 配置文件 在webpack.config.js中
- const path = require('path') //由于 webpack是 基于node进行构建的 , 所以, webpack的配置文件中 ,任何 合法的 node 代码 都是支持的
- 向外 暴露 一个 配置对象:
module.exports = { } 当以命令行 形式 运行 webpack 或 webpack-dev-server 的时候, 工具会发现 , 我们并没有提供 要打包的 文件的 入口 和 出口文件 , 此时 ,他会检查项目根目录中的 配置文件 , 并 读取这个文件 , 就拿到了 导出的 这个 配置对象 , 然后 根据这个 对象 , 进行打包 构建
(1.) 指定入口文件 :entry: path.join(__dirname,'./src/main.js')
(2.) 通过 output 指定 输出选项 output: { }
output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' }
- 配置完成后 , 命令行 输入 webpack 打包 , 此时并没有实现 实时打包
- 如果 我们要 利用 dev-server 这个 工具 实时打包的话 , 需要在 package.json里 添加一个 脚本 , 在
scripts: { } 里 再添加一个指令:"dev": "webpack-dev-server"
-
webpack-dev-server的配置参数
- 第一步:
(1.) 自动打开浏览器 --open"
(2.) 设置启动时的默认端口 --port 3000
(3.) 指定托管的 根目录 --contentBase src
(4.) 启动热更新 --hot
- 命令行 输入 npm run dev 右键审查 报错 页面里的 bundle.js 路径不对
第一种: 把页面里的 ../dist/bundle.js 路径 改为 : /bundle.js
第二种: 注释掉
用 html-webpack-plugin来实现 他为我们 在内存中生成 一份 一模一样的页面 , 并且会 自动 把 bundle.js 注入到 页面底部 我们不需要再手动 处理 bundle.js 的引用路径 - 命令行 安装 cnpm i html-webpack-plugin -D
- 在 配置文件中 , 引入
const htmlWebpackPlugin = require('html-webpack-plugin')
- 插件引入进来了 , 如果要 配置插件 , 需要在 导出的 对象中, 挂载一个 plugins 节点 , plugins是一个数组, 和output平级 , 配置 一个
plugins:[ ]
, 然后 new一下 htmlWebpackPlugin
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname,'./src/index.html'),
filename: 'index.html'
})
]
***** 如果 想要 引入 css 样式:
新建 index.css
- 我们可以在index.html link一下css文件, 但是这样会发起 请求 ; ( 不赞同这种方式 )
- 我们可以在 main.js 里 , import 一下 eg:
import './css/index.css'
保存 会报错, 提示我们 webpack 处理不了这种类型的文件 , 需要我们 安装 loader - 安装 处理样式表的 loader : ( 命令行输入
cnpm i style-loader css-loader -D
) - 然后 我们需要 添加一下 配置节点 module 节点 module: { rules: [ 处理css文件的loader ] }
{ test: /\.css$/, use: ['style-loader', 'css-loader'] } //处理 css文件的 loader
***** 如果 想要 引入 less 文件:
命令行安装 cnpm i less-loader less -D
{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] } //处理 less文件的 loader
***** 如果 想要 引入 scss 文件:
命令行安装 cnpm i sass-loader node-sass -D
{ test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader'] } //处理 scss文件的 loader
若我们 想在 css 里 写一个 背景图片 eg: background: url(../images/cat2.jpg) no-repeat;
保存 报错 , 也就是说 默认情况下 , webpack 无法帮我们处理 css 文件中的 url 地址 不管是 图片 还是 字体库 , 只要是 url 地址 都处理不了
解决办法:
- 第一步:
安装 url-loader , 同时 url-loader 也需要依赖于 它内部的 file-loader
( 命令行 输入cnpm i url-loader file-loader -D
) - 第二步:
在配置文件中 ,配置一下{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' } //处理 图片路径的 loader
- 第三步:
npm run dev 运行 右键审查 发现 background: url 地址里 自动转成了 base64 格式的 背景图, 这样可以避免多次请求 , 但是 我们有时候, 一些小图可以转成 base64的 , 有些大图 不想让转成 base64格式 怎么办呢??? - 第四步:
在配置文件中 , 找到 url-loader 加参数 , 和 url地址传参一样 url-loader 有一个固定的 参数 limit , 后边跟的是 图片的 字节数
eg:{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=19898' }, //处理 图片路径的 loader
1.) 如果limit 后边给定的值 , 大于图片本身的字节数时, 会把图片进行base64编码
2.) 如果limit 后边给定的值 , 等于或者小于图片本身的字节数时, 则不会 转为 base64的字符串, 但是 图片路径为 数字和字母组成的 避免重复的名字 , 如果不想改名, 我们传的什么名字的图片, 打包完还要那个名字的 , 怎么办呢? - 第五步:
配置文件url-loader 传入第二个参数 name=[name].[ext]
eg:{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=19898&name=[name].[ext]' }, //处理 图片路径的 loader
[name]是指: 之前是什么名儿, 还是什么名 [ext] 打包前是什么后缀名, 还是什么后缀名- 如果src 里 建立两个文件夹: images images2 里边各有一张 图片名 cat.jpg 的 图片 此时, 浏览器里 两个div的背景图 会显示同一张cat.jpg的图片 因为他们的名字一样 为避免这种情况 我们可以在 [name] 前再加一个 参数 哈希值
eg:{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=19898&name=[hash:8]-[name].[ext]' }, //处理 图片路径的 loader
[hash:8] 表示 要截取哈希的前8位放到图片名字前, 哈希值最大可以设置32位
- 如果src 里 建立两个文件夹: images images2 里边各有一张 图片名 cat.jpg 的 图片 此时, 浏览器里 两个div的背景图 会显示同一张cat.jpg的图片 因为他们的名字一样 为避免这种情况 我们可以在 [name] 前再加一个 参数 哈希值
***** 针对处理一些更高级的 ES6与ES7语法:
在 webpack 中 , 默认只能处理 一部分 ES6的 新语法 , 一些 更高级的 ES6语法 或者 ES7语法 , webpack是处理不了的 , 这时候 , 就需要 借助于 第三方 loader 来帮助 webpack 处理这些 高级的 语法 , 当 第三方loader 把 高级语法 转为 低级的语法之后 , 会把结果 交给 webpack 去打包 到 bundle.js 中
解决方法:
通过Babel , 可以 帮我们 将 高级的 语法转为 低级的 语法
- 1. 在 webpack 中 , 可以运行 如下的 两套命令 , 安装 两套包 , 去 安装 Babel 相关的 loader功能
- 1.1 第一套包:
cnpm i babel-core [email protected] babel-plugin-transform-runtime -D ;
- 1.2 第二套包:
cnpm i babel-preset-env babel-preset-stage-0 -D ;
- 1.1 第一套包:
- 2. 打开 webpack 的 配置文件, 在 module 节点下的 rules 数组中 , 添加 一个 新的 匹配规则
2.1
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
-
2.2 注意: 在配置 babel 的 loader 规则的时候 , 必须把 node_modules 目录, 通过 exclude 选项 排除掉
原因有 :- 2.2.1 如果 不排除 node_modules , 则 babel 会把 node_modules 中 所有的 第三方 JS 文件 , 都打包 编译 , 这样 , 会非常 消耗 CPU , 同时 , 打包速度 非常慢 ;
- 2.2.2 哪怕, 最终 babel 把 所有的 node_modules 中的 JS 转换完毕了 , 但是 项目也 无法正常 运行
- 3. 在项目的 根目录中 , 新建一个 叫做 .babelrc 的 Babel 配置文件, 这个 配置文件 属于 JSON格式 , 所以 在写 .babelrc 配置的 时候 , 必须符合 JSON 语法规范 : 不能写注释 , 字符串 必须用 双引号
- 3.1 在 .babelrc 写如下的 配置: presets: 可以翻译成 语法的意思 plugins: 插件
- 3.1 在 .babelrc 写如下的 配置: presets: 可以翻译成 语法的意思 plugins: 插件
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
***** 默认, webpack 无法打包 .vue 文件 , 需要安装相关的 loader:
cnpm i vue-loader vue-template-compiler -D
- 在配置文件中 , 新增 loader 配置项
{ test:/\.vue$/, use: 'vue-loader' }
***** 总结梳理: webpack中 如何使用 vue
- 安装 vue 的包: cnpm i vue -S
- 由于 在 webpack中 , 推荐使用 .vue 这个组件模板文件定义组件 , 所以 , 需要安装 能解析这种文件 的 loader ,
cnpm i vue-loader vue-template-compiler -D
3.在 main.js 中 , 导入 vue 模块import Vue from 'vue'
- 定义一个 .vue 结尾的 组件, 其中 组件由三部分组成 : template script style
- 使用 import 导入这个组件
import login from './login.vue'
- 创建 vm实例
var vm = new Vue({ el: '#app', render: c => c(login) })
- 在页面中 创建 一个 id 为 app 的 div元素 , 作为我们 vm 实例 要控制 的 区域