vue在国内很火，在github上的star已经超过了react。
现在vue-cli3.x已经正式发布了，相信很多人也在使用vue开源的脚手架，前几个月我写过一篇关于vue-cli3.x的使用文章，也有很多朋友问我脚手架的相关使用问题，我最近花了两天时间研究了下，最终得出一个结论，真的是贼难用，因为我根本不知道怎么在vue.config.js中去配置全局引用、路径别名等。
官方文档介绍了怎么在config中配置，文档告诉我配置webpack相关需在chainWebpack中配置，我研究了半天，知道配置路径别名是如下配置的：
// vue.config.jschainWebpack: config => {
config.resolve.alias
.set('assets', path.join(__dirname, 'src/assets'))
.set('components', path.join(__dirname, 'src/components'))
}可是怎么去设置全局引用api呢？不懂...
所以我还是选择手动配置webpack，下面把我的配置给大家讲解下。。。
一、开始之前先安装好nodeJs和npm，下面是我的node和npm版本。并创建一个项目vue-webpack4（名字你高兴咋起就咋起）
node&npm.png
二、项目目录结构
1.在vue-webpack4目录下打开cmd执行npm init -y生成package.json
2.在vue-webpack4目录下新建src目录，在src下新建assets、components目录和index.html main.js router.js store.js
---src ---assets // 静态资源，如图片、css ---index.html // html模版文件 ---main.js // 入口文件 ---router.js // 路由文件 ---store.js // 仓库文件
src.png
3.在vue-webpack4目录下创建webpack.config.js（所有的开发生产配置都将写到这里）
三、package.json中的相关依赖
{ "name": "webpack-vue", "version": "1.0.0", "description": "webpack4.0搭建vue开发环境", "main": "main.js", "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --mode development --profile --progress", "build": "cross-env NODE_ENV=production webpack --mode production --profile --progress"
}, "author": "xs", "license": "ISC", "devDependencies": { "autoprefixer": "^8.6.5", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-runtime": "^6.23.0", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", "babel-runtime": "^6.26.0", "clean-webpack-plugin": "^0.1.19", "cross-env": "^5.2.0", "css-loader": "^0.28.11", "file-loader": "^1.1.11", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "image-webpack-loader": "^4.3.1", "mini-css-extract-plugin": "^0.4.1", "postcss-loader": "^2.1.6", "poststylus": "^1.0.0", "style-loader": "^0.21.0", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "url-loader": "^1.0.1", "vue-hot-reload-api": "^2.3.0", "vue-html-loader": "^1.2.4", "vue-loader": "^15.3.0", "vue-style-loader": "^4.1.1", "vue-template-compiler": "^2.5.17", "webpack": "^4.16.5", "webpack-cli": "^2.1.5", "webpack-dev-server": "^3.1.5"
}, "dependencies": { "axios": "^0.18.0", "vue": "^2.5.17", "vue-router": "^3.0.1", "vuex": "^3.0.1"
}
}大家可以看到scripts中设置了dev和build，开发和生产两种模式。
其中在dev中设置开环境变量为development，
在build中设置开环境变量为production
四、配置webpack.config.js
1.获取环境变量
const isProd=process.env.NODE_ENV==='production';
下面会根据开发或生产环境进行不同的配置；
2.设置入口文件
entry: {
main: './src/main.js', // 入口文件
vendor: ['axios'] // 打包第三方库放在vendor.js中}
{...}3.既然有入口，就应当有出口
const path=require('path');
{...}
output: { path: path.resolve(__dirname, 'dist'), // 打包目录
filename: isProd?'javascript/[name].[hash:8].js':'[name].js', // [name] 是entry的key
publicPath: isProd?'./':'/'}
{...}4.开发环境启用source-map
{...}
devtool: isProd?false:'eval-source-map', // 如果只用source-map开发环境出现错误定位源文件，生产环境会生成map文件
{...}5.配置module.rules,
文本分离插件在webpack3.x之前试用的extract-text-webpack-plugin，现在webpack4.x版本建议使用mini-css-extract-plugin
const MiniCssExtractPlugin=require('mini-css-extract-plugin'); // 文本分离插件，分离js和css/**
* css和stylus开发、生产依赖
* 生产分离css
*/const cssConfig=[isProd?MiniCssExtractPlugin.loader:'vue-style-loader',{ loader: 'css-loader', options: { minimize: isProd, sourceMap: !isProd
}
},'postcss-loader']
,stylusConfig=[isProd?MiniCssExtractPlugin.loader:'vue-style-loader',{ loader: 'css-loader', options: { minimize: isProd, sourceMap: !isProd
}
},{ loader: 'stylus-loader', options: { sourceMap: !isProd
}
}];
{...}module: { rules: [
{ test: /\.css$/, use:cssConfig
},
{ test: /\.styl(us)?$/, use: stylusConfig
},
{ test: /\.vue$/, loader: 'vue-loader', options: { hotReload: true, // 热重载
loaders:{ css: cssConfig, stylus: stylusConfig
}
},
},
{ test: /\.js$/, loader: 'babel-loader', query:{ presets: ['env']
}, exclude: file => ( /node_modules/.test(file) &&
!/\.vue\.js/.test(file)
)
},
{ test: /\.(png|jpe?g|gif|bmp|svg)$/, use: [{ loader: 'url-loader', options: { // 配置图片编译路径
limit: 8192, // 小于8k将图片转换成base64
name: '[name].[hash:8].[ext]', outputPath: 'images/'
}
},{ loader: 'image-webpack-loader', // 图片压缩
options: { bypassOnDebug: true
}
}]
},
{ test: /\.html$/, use: [{ loader: 'html-loader', options: { // 配置html中图片编译
minimize: true
}
}]
},
{test: /\.(mp4|ogg|svg)$/,use: ['file-loader']},
{ test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader:'url-loader', options:{ limit:8192, name:'fonts/[name].[hash:8].[ext]'
}
}
]
}
{...}6.配置开发模式热启动
{...}
devServer:isProd?{}:{
contentBase: path.join(__dirname, 'dist') // 将 dist 目录下的文件，作为可访问文件。
,compress: true // 开启Gzip压缩
,host: 'localhost' // 设置服务器的ip地址，默认localhost
,port: 9001 // 端口号
,open:true // 自动打开浏览器}
{...}7.配置引入文件不用带后缀和路径别名
{...}
resolve: {
extensions: ['.js', '.vue', '.styl'], // import引入文件的时候不用加后缀
modules: [ // 配置路径别名
'node_modules'
,path.resolve(__dirname, 'src/components')
,path.resolve(__dirname, 'src/assets')
]
}
{...}8.插件
const webpack=require('webpack');const HtmlWebpackPlugin=require('html-webpack-plugin'); // 自动生成index.htmlconst CleanWebpackPlugin=require('clean-webpack-plugin'); // 清理垃圾文件const VueLoaderPlugin = require('vue-loader/lib/plugin'); // vue加载器const PostStylus=require('poststylus'); // stylus加前缀{...}
plugins: [ new VueLoaderPlugin(), // vue加载器
new webpack.BannerPlugin(`xs build at ${Date.now()}`), // 打包后在.js/.css页头的时间（并没什么卵用）
new CleanWebpackPlugin([path.join(__dirname, isProd?'dist':'')]), // 每次打包之前清理打包目录
new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/index.html') // 引入模版
,favicon: path.join(__dirname, 'src/assets/icon/favicon.ico')
,filename: 'index.html'
,minify: { // 对index.html压缩
collapseWhitespace: isProd // 去掉index.html的空格
,removeAttributeQuotes: isProd // 去掉引号
}
,hash: true // 去掉上次浏览器的缓存（使浏览器每次获取到的是最新的html）
}), new MiniCssExtractPlugin({ // 分离css
filename: isProd?'stylesheets/[name].[hash:8].css':'[name].css', allChunks: true
}), new webpack.NamedModulesPlugin(), // 热更新 HMR
new webpack.HotModuleReplacementPlugin(), // 热加载插件 HMR
new webpack.LoaderOptionsPlugin({ // stylus加前缀
options: { stylus: { use: [
PostStylus(['autoprefixer']),
]
}, babel: { presets: ['es2015'], plugins: ['transform-runtime']
}
}
}), new webpack.ProvidePlugin({ // 配置第三方库
$http: 'axios' // 在.vue文件中可以使用$http发送请求，不用每次都import Axios from 'axios';也不用挂载到vue原型链上
})
]
{...}9.抽离js和css
{...}
optimization: { splitChunks: { cacheGroups:{ // 这里开始设置缓存的 chunks
vendor: { // key 为entry中定义的 入口名称
chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
test: /node_modules/, // 正则规则验证，如果符合就提取 chunk (指定是node_modules下的第三方包)
name: 'vendor', // 要缓存的 分隔出来的 chunk 名称
minChunks: 1, enforce: true
}, styles: { chunks: 'all', test: /\.(css|styl)$/, name: 'vendor', minChunks: 1, enforce: true
}
}
}
}五、编写main.js
在components目录下新建App.vue
const root=document.createElement('div');document.body.appendChild(root);import Vue from "vue";import router from "./router"; // 路由import store from "./store"; // 状态管理import App from "App"; // 导入App组件（为什么这样导入？请看第四段中的第7）new Vue({
router,
store, render: h => h(App)
}).$mount(root);六、编写router.js
和脚手架生成的一样；
七、编写store.js
和脚手架生成的一样；
八、命令
开发启动命令：npm run dev
生产打包命令：npm run build
九、最后在vue-webpack4目录下新建.babelrc文件，
设置babel转码和指定浏览器版本
{ "presets": [
["env", { "modules": false , "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}], "stage-3"
]
}十、最后就可以肆无忌惮的编写vue代码啦！
以上都是个人心得，若有不对的地方，还希望大家多多指出，共同学习成长！
作者：我友几个逗逼
链接：https://www.jianshu.com/p/87b48e29773c
随时随地看视频
