【一】.初始化
npm init -y
【二】.添加基础文件包解析详细安装
- 压缩模板并引入打包JS
html-webpack-plugin
功能：将模板页面，并将打包JS自动引入到模板页
语法：
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins:[
new HtmlWebpackPlugin({ template:'./index.html' })
]
...
- 解析css，css3
style-loader css-loader postcss-loader
自右至左读取 先css-loader 再style-loader
1.css-loader 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖
2.style-loader 将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效
解析css3
1.将'postcss-loader' 放在 style-loader css-loader 右侧优先引入
2.为postcss-loader添加配置文件
postcss.config.js
module.exports={
plugins:[
require('autoprefixer')
]
}
- 解析图片
file-loader url-loader
不能单独安装url-loader ，因为内部对file-loader存在依赖
- 解析es6语法
babel-loader @babel/core @babel/preset-env -D
- js代码压缩 （只在生产模式下使用，且需要BABEL编译ES5）
uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin -D
- 热更新
webpack webpack-cli webpack-dev-server
【三】.对webpack.config.js进行配置
- 动态的获取开发环境
通过对package.json中定义scripts命令
...
"scripts": {
"dev": "webpack --env.development",
"build": "webpack --env.production"
}
...
可以获取一个env键值对，如上面 npm run dev 情况，会在终端输出 development : true，这样就获取了开发状态
后续就可以对webpack做动态配置
在webapck.config.js中，导出形式从
module.exports = { ... } 固定对象形式 书写为 module.exports = function(){ ... }
这样可以在函数中，针对开发环境，return 不同的配置
代码：
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports= function(envmes,arg){
let env = envmes || {};
let modemes = "";
//其他配置
let configmes = {};
if(env.development){
console.log('开发模式');
modemes = 'development';
configmes = {
devtool:'source-map',
plugins:[
//new HtmlWebpackPlugin({ template:'./index.html' }),
new VueLoaderPlugin()
]
}
}else if(env.production){
console.log('生产模式');
modemes = 'production';
configmes = {
plugins:[
//new HtmlWebpackPlugin({ template:'./index.html' }),
new VueLoaderPlugin()
]
}
};
return {
mode:modemes,//模式
entry:'./index.js',//入口文件
resolve:{
alias:{
"vue" : path.resolve(__dirname,"node_modules/vue/dist/vue.esm")
}
},
output:{
path:path.resolve(__dirname,'build/'),
filename:'bundle.min.js'
},
module:{
rules:[
{test:/\.css$/,use:['vue-style-loader','css-loader','postcss-loader']},
{test:/\.(jpg|png|gif)$/i,use:{
loader:'url-loader',
options:{
outputPath:'image/',
limit:10*1024 //单位字节，例：10kb -- 一般32
}
}
},{
test:/\.jsx?/i,
exclude:/node_modules/, //如果引入了node_modules中的包，不要编译
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
},{
test:/\.vue$/i,use:{loader:'vue-loader'}
}
]
},
...configmes
};
}
1.解构可以将configmes配置变量，解构到最终返回配置中
错误！！！！！！！！！
节后修改：
------( 还是将配置分离出去 在配置一级目录引用 ) 解构有问题，
------(另外env 还是通过 process.env.NODE_ENV 来设置与获取，更符合行规)
2.利用resolve的alias别名，方便快速定义文件路径
【四】.针对vue本身
- 安装vue环境
npm install vue -S
在入口文件(如 index.js)中，引入vue
值得注意的是
import Vue from 'vue' ;
会报错，原因是路径错误
You are using the runtime-only build of Vue where the template compiler is not available.
Either pre-compile the templates into render functions, or use the compiler-included build.
真实地址是
import Vue from 'vue/dist/vue.esm.js'
【五】.解析Vue中的单文件组件（xxx.vue）
- 安装额外解析文件包
1.针对.vue 格式解析
安装 vue
安装 vue-loader
2.解析单文件组件中css,并将css打包
安装 vue-style-loader
3.解析单文件组件中的template
安装 vue-html-loader
4.安装 vue-template-compiler
编译 整个单文件组件
安装:
npm install vue-loader vue-style-loader vue-html-loader vue-template-compiler -D
- 对webpack.config.js配置：
1.添加规则，解析.vue文件
{
test:/.vue$/i,use:{loader:'vue-loader'}
}
2.修改css解析器
style-loader 更换为 vue-style-loader
3.配置 vue-loader/lib/plugin
引入
const VueLoaderPlugin = require('vue-loader/lib/plugin');
...
plugins:[
new VueLoaderPlugin()
]
...
【六】.vue-router
安装：
npm install vue-router -S
路由使用暂无其他注意事项，同vue-cli
【七】.安装 数据请求
安装：
axios
npm install axios vue-axios -S;
vue-resource、fetch等
具体操作
【八】.vuex 数据管理
安装：
npm install vuex -S
//-------------------------------【目前状态】
1.可以解析js es6 css css3 img 文件格式（后续可以自己添加对不同格式解析，如less等）
2.可以根据package.json自定义命令，动态配置打包(webpage)项目
3.可以解析单文件组件(xxx.vue)
4.使用路由 vue-router
5.数据请求 axios 、vue-resource 、fetch
6.组件状态（数据）管理 vuex
未完待续...
