webpack
webpack插件
cli2
cli3
webpack:在命令行输入命令,将src文件打包到dist
步骤
- 安装npm+node+webpack
- 创建package.json文件,(1)设置运行快捷键(2)包之间依赖关系
- 创建webpack.config.js文件,设置入口/入口位置
定义:简单任务用gulp,模块化开发项目需要用webpack
安装node+webpack
//1.安装node
命令行:查看当前node版本 `node -v`
//2.安装npm
命令行: 全局安装
(1)`npm install webpack@3.6.0 -g`
命令行: 按项目安装
(1)cd 项目的根目录
(2)`npm install webpack@3.6.0 --save-dev`
package.json
来源1:命令行:npm init (node初始化,创建依赖关系文件)
来源2:如果别人的项目发package.json文件后,可下载依赖包:命令行:npm install
作用1:设置运行webpack快捷命令
作用2:存储开发/运行时依赖的文件包版本
"srcipt":{
"build" :"webpack" //执行时,build在本地查找,webpack在全局查找
}
//这和下载插件时npm install -seve -dev 的关系
"devdependencies" :{"webpack :3.6.0"}//开发时依赖
"dependencies":{各种插件的名称和版本}//运行时依赖
webpack.config.js
来源:手动创建
作用1:设置webpack命令的入口/出口文件
作用2:配置loader+plugin插件
//(1)引用path模块设置绝对路径
let path = require("path")
//(2)设置入口文件地址和出口文件地址
module.exports = {
entry: "src入口文件地址", //入口
output: { //出口
path: path.resolve(__dirname, "dist"), //绝对路径
filename: "文件名称" //名称
}
}
node_modules
来源:npm下载后自动生成
作用:存储webpack文件
package-lock.json
src
dist
html文件
webpack插件(loader+plugin)
loader
(1)npm下载对应loader
(2)webpack.config.js配置文件
loader名称 | 解释 | 地址 |
---|---|---|
style-loader | css | 地址 |
css-loader | css | 地址 |
less-loader | less | 地址 |
url-loader | 图片大小 | 地址 |
file-loader | 图片大小 | 地址 |
babel-loader | es6转化成es5(p81) | 地址 |
vue-loader | p81 | |
vue-template-compiler | p81 |
//webpack.config.js配置文件 举例
//(1)引用path模块设置绝对路径
let path = require("path")
//(2)设置入口文件地址和出口文件地址
module.exports = {
entry: "src入口文件地址", //入口
output: { //出口
path: path.resolve(__dirname, "dist"), //绝对路径
filename: "文件名称" //名称
}
module: { //从此处举例
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
plugin
(1)npm下载插件
(2)webpack.config.js配置文件
功能 | 解释 | 地址 |
---|---|---|
声明版权的插件 | ||
将根目录的html文件打包进dist的插件 | ||
压缩 JS代码 | ||
搭建本地服务器 |
//webpack.config.js配置文件 举例
//(1)引用path模块设置绝对路径
let path = require("path")
//(2)设置入口文件地址和出口文件地址
module.exports = {
entry: "src入口文件地址", //入口
output: { //出口
path: path.resolve(__dirname, "dist"), //绝对路径
filename: "文件名称" //名称
}
plugins:[new HTMLwebpackplugin( {
template:“index.html(根目录的html文件)”
}),其他配置代码]
}
cli2
查看安装的脚手架版本 vue --version
下载cli2 npm install -g @vue/cli-init
创建项目 cli2 vue init webpack 项目名称
打开本地服务器(在package.json内查看) npm run dev
打包 npm run build
创建项目弹出内容 | 解析 |
---|---|
project name[] | 创建项目名字 |
project description | 项目描述 |
author | 作者 |
vue build | runtime +compiler或者runtime only(和组件的写法有关) |
install vue-router | 下载路由 |
Use ESlink | 规范js代码,否则编译器报错(空格,分号,双引号) |
set up unit tests | 单元测试 |
set up e2e | 端到端测试(测试的活) |
生成文件结构 | 解析 |
---|---|
src | 开发代码 |
node_modules | 第三方模块 |
index.html | 入口html文件,最后会打包到dist |
package.json | 包的信息,大概的版本 |
package-lock.json | 包的真实信息,可能差距小版本 |
config文件夹 | webpack的配置 |
build文件夹 | webpack的配置(webpack.config.js) |
static文件夹 | 静态文件, 原封不动复制到dist文件夹内 |
babelrc文件 | es6转化成es5, 不好理解 |
deitorconfig | 代码统一, 字符集,空格 |
eslintignore | 不用检测哪些文件是否有格式问题 |
gitignore | 传递到git时,这些文件不需要上传 |
eslintrc | 代码检测配置 |
post css | 转化css时用的 |
readme | 文档 |
cli3
查看安装的脚手架版本 vue --version
下载cli3 npm install -g@vue/cli
创建项目 cli3 vue creat 项目名称
打开本地服务器(在package.json内查看) npm run dev
打包 npm run build
创建项目弹出内容 | 解析 |
---|---|
选择配置 | 自动配置 / 手动配置, 空格为选中, 把eslintrc可以关掉 |
包的配置信息存储在 | 新建文件夹(一般选择这个)或者package.json |
是否将上面的配置保存成【自动配置】 | |
取个名字 | |
选择npm |
生成文件结构 | 解析 |
---|---|
src | 开发代码 |
node_modules | 第三方模块 |
package.json | 包的信息,大概的版本 |
package-lock.json | 包的真实信息,可能差距小版本 |
public文件夹 | 静态文件, 原封不动复制到dist文件夹内,index.html 放在这 |
browserslistrc | 配置浏览器相关内容, 大于1%, ie8以上等 |
gitignore | 传递到git时,这些文件不需要上传 |
babelrc文件 | es6转化成es5, 不好理解 |
post css | 转化css时用的 |
readme | 文档 |
修改配置文件
方式1:启动配置服务器 vue ui
1.任何目录的cmd :vue ui
2.点击导入【用命令创建的li3项目】
3.点击插件,查看有哪些插件
4.项目配置:输出目录,静态资源,启动运行时编译(runtime +compiler/runtime only),编译css的文件
5.任务:在ui这里运行一些任务
方式2:
打开node_modules
找@vue
cli-service
webpack.config.js
根据require慢慢一层层的找
或者在目录文件下新建一个配置文件, vue.config.js 打包的时候会添加到webpack中,里面写modules.exports即可