cli3目录介绍 安装webpack

cli3 目录介绍

public 和 src中的 assets的区别
1.

• public里面的图片不会被编译
• assets目录下的图片会被webpack编译
  其中 assets中的图片小于4k的时候会转换成base64 转换成base64会造成html的污染

单文件组件的创建

1.在src目录下创建装载单组件的文件夹

如图中的page文件夹：

2.在文件夹内创建单组件
如图中的 Home文件夹

创建的单文件组件命名首字母大写 创建的单文件组件的后缀是 .vue

3.在app.vue中引用

• import Home from ’ page/Home ’
• 在export default 里面注册

4.在最大的组件中引用该组件 ，以标签的心事使用组件

启动项目

1.开发环境启动：
yarn serve
2.生产环境：
yarn build

• 使用yarn build 会自动生成dist上线目录，
  上线就是，谁都可以访问
  所以我们生产环境的代码要放到服务器环境下【web服务器】才可以使用

main.js文件：是整个项目的入口文件

cli3 & cli2

• cli3 的 webpack 配置在node_modules 里面
• cli2 的在项目的根目录下

为了避免我们经常会删除node_modules从而导致webpack丢失的问题，我们一般
在cli3中创建 vue.config.js 文件

-D是开发环境
-S生产环境

eval 这个方法是用来解析js代码字符串的（性能不好）
webpack 底层是node.js，所以这些文件都是node.js文件，遵循common.js规范

webpack

webpack就是前端工程化的一个工具

loader:转换器
1.手动构建一个项目
流程：
前端环境：
1.开发环境
2.生产环境：经过编译压缩的
3.测试环境：

• unit text 单元测试（mocha jest）
• e2e 端到端测试
  4.预上线环境：测试一些新的功能
  5.上线环境：任意一个人都可以可以进行访问

安装webpack

流程：
yarn>cnpm>npm 命令的优先级
当我们使用 npm 安装失败之后，用cnpm或yarn安装
局部安装全局安装都可以
1.新建目录webopack
2.开终端
3.初始化，安装package.json $ npm i
4.局部安装webpack,webpack-cli,

$cnpm i webpack webpack-cli -D (-D是开发环境)

5.在webpack文件夹里面新建src文件夹
6.在src里面新建index.js文件(可以在该js文件里写内容)
7.全局安装 webpack

$ cnpm webpack webpack-cli -g

8.在终端输入 $ webpack 生成dist目录（里面是大包压缩的文件）
Hash: a98030eeb0d6e18a7fd2 :
Version: webpack 4.39.0:webpack的版本
Time: 3049ms: 打包编译的时间
Built at: 2019-08-02 17:11:59:详细的打包下来的时间
Asset ：开发环境下的静态资源（这里指的是main.js）
Size: main.js的大小
Chunks: 分块，分片
Chunk Names：分片的名称
main.js 957 bytes 0 [emitted] main
Entrypoint main = main.js:入口是main.js（这是打包之后出口的结果）
[0] ./src/index.js 27 bytes {0} [built]:入口文件是src下面的index.js
9.$webpack --mode development (操作该命令之后main.js里面的东西就没有被压缩了)
10.在解压的main.js中有如下代码

/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("console.log('hello 你好')\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
/******/ });

我们编译了谁，谁就会出现在 /***/ “./src/index.js”: 得地方
eval是用来解析js字符串的 但是 性能不好
11.在dist 写html页面引入main.js就可以(可以在控制台查看结果的输出)
以上是终端命令行使用webpack

配置文件使用webpack

1.在项目根目录下（webpack）新建webpack.config.js文件
2.开始配置webpack.config.js文件
主要是从以下几个进行配置：

• 基础功能 入口：src里面的index.js 出口:dist里面的main.js 文件配置
• 转换器 loader
• 插件 plugin
  单页面配置：只有一个入口一个出口的项目
  多页面配置：多个入口多个出口
  3.在webpack.config.js里面进行操作：

const webpackConfig={//这个就是webpack的配置
entry:'',//里面是入口文件的路径（网络路径 / 相对路径）
output:{//出口文件的配置
//output有两个选项，一个是path一个是filename
//path：指的是当前dist目录的路径（磁盘路径）
//filename：指的是文件的名称，入口文件将来打包到出口目录中的文件的路径和名称(在这里可以修改出口文件名称)
},
mode:'',
}
// 导出的目的是为了让webpack命令识别
module.exports=webpackConfig

4.接下来我们配置入口（entry）和出口（output）(如上图)
5.运行webpack会生成build文件目录
6.此时我们在终端可以看到一段黄色的代码，说我们没有mode
7.所以我们要创建mode（如上面代码）

验证webpack是否能自动解决模块化依赖问题

1.在src下面创建index.js文件
我们想要实现模块化之间的依赖所以我们新建模块 module 文件夹
2.在module里面新建 name.js文件
3.webpack使用的是common.js规范，所以我们可以写，创建模块 导出模块 引用模块
4.所以在name.js文件里面创建，模块导出模块
5.在index.js里面引入模块
6.用webpack命令打包模块

loader转换器 可以将其他类型的文件转换成我们想要得类型文件

实现css的使用 让css效果在页面显示
1.首先安装两个包：

$ cnpm i style-loader css-loader -D
开发环境 -D

2.在src里面新建assets文件->在里面新建css文件->新建index.css
3.安装好后，找到配置性文件（webpack.config.js）在里面做如下配置：
所有的转换器都配置在一个叫module的配置项内的rules里面

module:{
rules:[
//{} 每一个对象就是一个转换器的配置
{
test:/\.css$/,//用正则匹配整个项目.css结尾的文件
use://[]使用什么东西将css文件转换成别的类型的文件 先写css.loader 然后在他的前面写 style.loader
['style-loader','css.loader']
// 我们使用css-loader将css文件编译为js，然后通过style-loader处理插入到html中
}
]，
}

4.以模块化的形式在index.js里面用css文件
require(’./assets/css/index.css’)
实时监听webpack

$ webpack -w

配置前端的静态服务器

1.配置前端静态服务器需要自动刷新，webServer 搭建前端开发服务器所以首先安装这个包

$ cnpm install webpack-dev-server -g 或者是 -D

2.执行：$ webpack-dev-server
3.定端口 ，自动打开，定环境 $ cnpm webpack-dev-server --port 8088 --open --mode development
4.$ cnpm install webpack-dev-server -g
5.在执行：$webpack-dev-server --port 8088 --open --mode development

1.在webpack.config.js里面的webpackConfig里面配置
2.

devServer:{
port:8000,//配置端口
open:true,//配置自动打开
hot:true,//自动刷新（热模块替换）也叫（热重载）
}

3. $ webpack-devserver
   4.可以吧$ webpack-devserver 这个命令放到package.json文件里

优雅降级的配置

1.$ cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D
2.然后在index.js里面测试
let lisa = “hahahahaha” let 是es6的
3.在webpack.config.js文件里配置优雅降级（起重工node_modules里面的东西除外 所以要给他忽略）
4.将代码放到rules里面

// 在webpack.config.js的module.rules中进行配置
{// 配置优雅降级
test: /\.js$/,
exclude: /node_modules/, // 排除node_models中的js文件
use: [{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}]
}

5.进行打包$ webpack

html产出 插件

1.在src里面新建public文件夹->里面新建 index.html
2.安装插件
cnpm i html-webpack-plugin -D
3.引入该插件在webpack.config.js里面
4.执行 $ webpack

1.7 css抽离 - 依赖的是插件

将webpack编译过得css文件以 css外部引用的形式引入

• 安装插件
  $ cnpm i extract-text-webpack-plugin -D

const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")
//loader配置：
use: ExtractTextWebapckPlugin.extract({
use: 'css-loader'
}) //不再需要style-loader
//pulgin配置
new ExtractTextWebapckPlugin('css/[name][hash:6].css')