插件 参照
用户设置 失去焦点 保持 。 要设置一下
第一步 初始化项目
npm init
接下来填写按照个人意愿，默认也可以，会生成一个 package.json 文件
第二步 安装webpack vue
npm i webpack vue vue-loder
看下WARN
第三步 补充安装第三方依赖
npm i css-loader ver-template
第四步 新建一个src 文件夹
内部建立一个app.vue
可以写几种标签
style 是template 的 。 三个标签构成 特殊组件
注意：data 是返回数组
此时 该组件 是不能在浏览器里运行的，如何做？
第六步 先建立一个 webpack.config.js
webpack是帮我们来打包前端资源的，注意我们前端资源又有很多类型，比如js css 图片 字体。。。
我们在开发web . app 是都是加载 js ，然后渲染，所以很多时候，我们都可以简单地以js文件作为我们的入口；
这里我们声明入口，而且要用绝对路径
第七步 。 开始编辑 。 入口 相关
第八步 在src . 新建一个入口文件 rukou.js . (这里应该是index 我为了强化这个区别)
render :(h)=>h(App) . ======接收一个h 参数 h(App ) 就是creat . app ,通过它 我们把APp 挂载到html 里
那我们的APP 涞源自哪里呢？
import . App from './app.vue'
其实上面也没有完全挂载，只是声明 ，需要将内容 mount 到html 的节点上面去
创建节点 和内容插入 见下面
第九步 将入口文件嵌入到配置 里面（将其 安全路径配入webpack.config）
__dirname 就是本文件所在目录
定义入口和出口
出口名称和路径
第十步 。 package.js 中加一行
为啥要在这里加入这个，因为只有在这里加了 webpack ,它才会调用我们项目内到webpack,如果直接运行，它会调用我们全局默认的webpack .
第十一步 开始build
错误处理1:
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https://github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use “npm” to install the CLI via “npm install -D”.
Which one do you like to install (webpack-cli/webpack-command):
解决方案依然是需要全局安装webpack-cli
如下：
npm install webpack-cli -g
在项目里再做一个本地安装：
npm install webpack -D
————————————————
版权声明：本文为CSDN博主「田江」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jiang7701037/article/details/80681310
处理错误2
npm WARNE [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
装一个低版本的不然 它需要一个 高版本的webpack
npm install [email protected] -g
处理错误3
这个错误就是你需要需要为。vue这种类型声明一种加载loader ,因为webpack 原生是支持js 类型，并且它只支es5的语法，
所以当我们使用超出它理解范围的语法时，我们要加一些帮他处理这些语法的工具，如何做？
这时我们再试一遍
错误处理4
vue 启动时，出现以下错误：
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
把node_modules 删除之后，输入以下命令(一定这个顺序)：
1 npm install vue-template-compiler -D
2 npm install
3 npm run dev
错误5处理
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的.
方法
在webpack.config.js中加入
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
......
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
}
//这时候 。 会有加载css 问题，我们县跳过，一会处理 ,怎么跳过，把style 里的css 先删掉
npm run build
此时 如果 你发现出口js代码是混淆过的
下面我们进入第二大阶段
2.1 加载css和图片等静态资源
装完这些我们就可以在js 里面加载 import 这些 非js 的资源
然后我们 在src 下面建立一个静态文件夹 为了好记 。 我用全拼 建立 一个 jingtaifile .
2.2 此时 我们就可以在js 里引入 import . 而且要看下 css
2.3 此时我们验证一下，webpack 能够帮我们打包
npm run build
上图可能是个base64 的编码
2.4 css 预处理器
将 stylus 处理成css,然后用css 往上逐层处理 最后成为js
加入.styl 文件 测试,写法很骚 很随便
报错
stylus-loader 依赖 stylus . 需要一起装，完成后 npm . run build
打包成功
====
总结一下 ，css 其他的预处理器的时候 可以参照 上面 加载 。去github 或者去 google . 搜索loder怎么用
3.webpack-dev-server 用法
3.1 安装 npm i webpack-dev-server
如果安装慢 ，自行百度 如何使用国内镜像
怎么使用呢
用一样的配置 但是webpack-dev-server 打包会给你不一样的体验
当然我们的 配置文件也要改下 到 webpack.config.js . 下
之前要先安装 一个 npm . i cross-env . 来区分环境变量
为啥呢，因为不同的开发系统对 环境变量设置 语法不通 通过cross-env 可以 自动判断系统 进行变量赋值到 cross-env 对象
修改前到 配置文件 。 webpack.config.js
const path = require('path')
//path 是node js 的基本包
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: path.join(__dirname, 'src/rukou.js'),
output: {
filename: 'chukou.js',
path: path.join(__dirname, 'wotian')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
//css
{
test: /\.css$/,
//loader:'css-loader',
use: [
'style-loader',
'css-loader'
]
},
// css 预处理
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
},
//图片
{
test: /\.(jpg|gif|png|jpeg|svg)$/,
use: [
//loader 用对象写 是因为要配置一些参数
// 另外 url-loader 其实是封装了 file-loader
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-[time].[ext]'
}
}
]
}
],
},
// 最小打包关闭
optimization: {
minimize: false,
},
plugins: [
new VueLoaderPlugin()
],
}
启动时 设置的 环境变量 都会 在 process.env 的对象中 比如NODE_ENV . 在package中设了 ，如果设置了其他的 这里面也会有
将配置 常量成对象
根据环境配置，
但是我们没有一个页面，webpack 有个很好用的组件，安装一下：npm i html-webpack-plugin
装完就引入一下这个webpack组件
webpack.config.js 修改后
const path = require('path')
//path 是node js 的基本包
const htmlPlugin = require('html-webpack-plugin')
const Webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const isDev = process.env.NODE_ENV === 'dev';
const config = { // 将配置设置为一个常量
target: "web",
entry: path.join(__dirname, 'src/rukou.js'),
output: {
filename: 'chukou.js',
path: path.join(__dirname, 'wotian')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
//css
{
test: /\.css$/,
//loader:'css-loader',
use: [
'style-loader',
'css-loader'
]
},
// css 预处理
{
test: /\.styl/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
//图片
{
test: /\.(jpg|gif|png|jpeg|svg)$/,
use: [
//loader 用对象写 是因为要配置一些参数
// 另外 url-loader 其实是封装了 file-loader
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-[time].[ext]'
}
}
]
}
],
},
// 最小打包关闭
optimization: {
minimize: false,
},
plugins: [
// 给我们webpack
//在编译以及我们在页面自己写 的js 代码中 需要判断环境 中使用，我们都可以调用 proess.env.NODE_ENV 进行环境判断
// 1 此处定义，js 可以引用到 2 打包会根据生产环境和开发环境 进行优化 注意这里用了 Webpack 最上面要引入
new Webpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev?'"dev"':'"pro"'
}
}),
new htmlPlugin(),
new VueLoaderPlugin()
],
}
// 根据是否是 开发环境对配置进行 更改
if (isDev) {
//如果是开发环境,就在config 中加一个devServer 的对象
config.devServer ={
port:'8989',
host:'0.0.0.0',
overlay:{
error:true // 有错误直接显示出来
},
open:true// 自动打开浏览器
}
}else{
}
module.exports = config;
热更新更改部分插件
4.1 。 vue2 . 的核心
在你的项目文件目录先执行命令 git init，使之成为一个 git 仓库。
将项目里所有文件加到本地的仓库，使用以下命令:git add ./ git commit -m "some message for this project."
然后将 github 上的项目 pull 下来
git pull https://github.com/youraccount/yourproject.git
为版本库添加名为origin的远程版本库。
git remote add origin https://github.com/youraccount/yourproject.git
执行推送命令，完成GitHub版本库的初始化。注意命令行中的-u参数，在推送成功后自动建立本地分支与远程版本库分支的追踪
git push -u origin master