一、安装配置环境
1.1、首先确定已经安装node.js
没有安装node.js可以去node.js官网下载并安装(http://nodejs.cn/)。非常简单,这里不再赘述。
1.2、安装webpack
1. windows+R 输入cmd打开控制台,进入D盘(命令 d:)
2. mkdir webpack-test // 新建一个文件夹目录
3. cd webpack-test //进入目录中
4. npm init //初始化项目
5. npm install [email protected] --save-dev //在文件夹下装webpack(npm命令可选择用cnpm淘宝镜像,此处webpack安装版本为3.10.0)
6. npm install [email protected] --save-dev //2.5.13版本
7. npm install [email protected] --save-dev //13.7.2版本
8. npm install css-loader vue-template-compiler --save-dev (统一vue和vue-template-compiler的版本)
9. atom ./ //在编辑器打开当前目录(此处为atom编辑器)
10. npm install style-loader url-loader file-loader --save-dev
11. npm install --save-dev babel-loader babel-core //安装支持ES6语法转换
12. npm install stylus --save-dev 安装stylus(css预处理器,操作css较方便)
13. npm install stylus-loader --save-dev
1.3、project
1.3.1.vue文件结构:
<template>
</template>
<script>
</script>
<style>
</style>
1.3.2简单的目录结构:
- index.html
- main.js 入口文件
- App.vue vue文件
- package.json 工程文件(项目依赖,名称,配置)
- npm init –yes生成
-
webpack.config.js webpack配置文件
-
webpack.config.js配置
-
module.exports={
//入口文件
entry:'./main.js',
//出口文件
output:{
//当前路径
path:__dirname,
filename:'build.js'
}
};
1.3、webpack-dev-server
1. npm install [email protected] --save-dev
webpack.config.js配置:
"dev":"webpack-dev-server --config webpack.config.js"
2. npm install cross-env
#设置环境变量标识是开发环境还是生产环境或其他(这里设置两个不同的变量)
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js --colors",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
webpack.config.js配置:
const isDev = process.env.NODE_ENV ==='development'
module.exports = 改为 const config =
if(isDev){
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay:{
errors:true,
}
}
}
module.exports = config
3. npm install html-webpack-plugin --save-dev
装载html文件
webpack.config.js配置:
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
plugins:[
new webpack.DefinePlugin({ //判断环境
'process.env':{
NODE_ENV:isDev ?'"development"' :'"production"'
}
})
new HTMLWebpackPlugin()
]
运行npm run dev //打包
package.json文件配置:
{
"name": "vue-ssr-tech",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js --colors",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"cross-env": "^5.1.6",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.21.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"url-loader": "^1.0.1",
"vue": "^2.5.13",
"vue-loader": "^13.6.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
webpack.config.js文件配置:
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const isDev = process.env.NODE_ENV ==='development'
const config = { //module.exports
target:'web',
entry : path.join(__dirname,'src/index.js'), //入口文件
output : { //出口文件
filename : 'bundle.js',
path : path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
use:'vue-loader'
},
{
test:/\.js$/,
use:'babel-loader',
include:path.resolve(__dirname +'./src/'), //绝对路径
exclude:path.resolve(__dirname +'node_modules') //打包过后无需再打包
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.styl/, //css预处理器
use:['style-loader','css-loader','stylus-loader']
},
{
test:/\.(png|gif|jpg|jpeg|svg)$/,
use:[
{
loader:'url-loader',
options:{limit:1024,name:'[name]_[hash:5].[ext]'}
}
]
}
]
},
plugins:[
new webpack.DefinePlugin({ //判断环境
'process.env':{
NODE_ENV:isDev ?'"development"' :'"production"'
}
}),
new HTMLWebpackPlugin()
]
}
if(isDev){
config.devtool ='#cheap-module-eval-soure-map' //帮助调试错误,soure-map映射文件
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay:{
errors:true,
},
hot:true, //当修改部分组件只重新加载这部分,而不是整个页面重新加载
// historyFallback:{ 单页应用 不匹配的路由,没有影射的地址都指定到某页面访问映射
//
// }
//open:true, //打包胡自动打开浏览器
}
//热加载
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config
二、vue介绍和项目实战
2.1
数据绑定
vue文件开发方式
render方法
2.2 API重点
生命周期方法
computed
1. npm install [email protected] [email protected] --save-dev
新建postcss.config.js文件配置:
const autoprefixer = require('autoprefixer')
module.exports = {
plugins :[
autoprefixer()
]
}
2. npm i babel-preset-env babel-plugin-transform-vue-jsx --save-dev
3. npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx --save-dev ([email protected],[email protected])
{
test:/\.jsx$/,
use:"babel-loader"
},
{
test:/\.styl/, //css预处理器
use:[
'style-loader',
'css-loader',
{
loader:'postcss-loader',
options:{
sourceMap:true, //stylus-loader可以生成sourceMap,postcss-loader也可以生成sourceMap,此设置可省略postcss-loader生成的
}
},
'stylus-loader'
]
},
新建.babelrc文件配置:
{
"presets":["env"],
"plugins":[
"transform-vue-jsx"
]
}
npm run dev //运行
2.3 项目
template下只能有一个子节点
2.4 项目完成后,webpack配置css单独分离打包
npm i extract-text-webpack-plugin
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ExtractPlugin = require('extract-text-webpack-plugin')
const isDev =process.env.NODE_ENV === 'development'
const config = {
target:'web',
entry:path.join(__dirname,'src/index.js'),
output:{
filename:'bundle.[hash:8].js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test:/\.js$/,
use:'babel-loader',
include:path.resolve(__dirname +'./src/'), //绝对路径
exclude:path.resolve(__dirname +'node_modules') //打包过后无需再打包
},
//jsx是vue2才出来的,因为它相对于.vue写模板的方式,灵活性更高,可以更方便使用js的原生方法
{
test:/\.jsx$/,
use:"babel-loader"
},
// {
// test:/\.css$/,
// use:[
// 'style-loader',
// 'css-loader'
// ]
// },
{
test:/\.(jpg|png|gif|jpeg|svg)$/,
use:[
{
loader:'url-loader',
options:{limit:1024,name:'[name]-[hash:8].[ext]'}
}
]
}
]
},
plugins:[
//new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env':{
NODE_ENV: isDev ? '"development"' :'"production"'
}
}),
new HTMLWebpackPlugin()
]
}
if(isDev){
config.module.rules.push({
test:/\.styl(us)?$/,
use:[
'style-loader',
'css-loader',
{
loader:'postcss-loader',
options:{
sourceMap:true, //stylus-loader可以生成sourceMap,postcss-loader也可以生成sourceMap,此设置可省略postcss-loader生成的
}
},
'stylus-loader'
]
})
config.devtool = '#cheap-module-eval-source-map'
config.devServer = {
port: 8000,
host:'0.0.0.0',
overlay:{
error:true,
},
hot:true
}
//热加载
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}else{
//生产环境
config.entry = {
app:path.join(__dirname,'src/index.js'),
vendor:['vue'] //单独打包vue
}
config.output.filename = '[name].[chunkhash:8].js'
config.module.rules.push({
test:/\.styl(us)?$/, //css预处理器
use:ExtractPlugin.extract({
fallback:'style-loader',
use:[
'css-loader',
{
loader:'postcss-loader',
options:{
sourceMap:true, //stylus-loader可以生成sourceMap,postcss-loader也可以生成sourceMap,此设置可省略postcss-loader生成的
}
},
'stylus-loader'
]
})
})
config.plugins.push(
new ExtractPlugin('styles.[contentHash:8].css'),
new webpack.optimize.CommonsChunkPlugin({
name:'vendor'
}),
//单独打包webpack文件
new webpack.optimize.CommonsChunkPlugin({
name:'runtime'
})
)
}
module.exports = config
npm i rimraf -D //每次打包前清空dist目录
"clean":"rimraf dist"