从0到1架构webpack+vue前端项目，你自己搭建过vue开发环境吗

前言:

平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。对项目里的webpack封装和配置了解的不清楚，容易导致出问题不知如何解决，或者不会通过webpack去扩展新功能，我们经常会迷惘webpack+vue项目究竟是怎样搭建起来的呢？文章比较长，需要些耐心，虽然可以直接在GitHub上拉写好的代码，但我更希望你能跟着文章一步步进行code。
通过本文你能学习到：

node项目初始化
webpack安装及配置
ES6代码转换成ES5代码
scss/sass/less/stylus转css
.vue文件转换成js文件
使用 jpg、png，font等资源文件
自动添加css各浏览器产商的前缀
webpack搭建本地服务及代码热更新
vue目录结构及vue-router使用
资源预加载
自定义环境变量和常量
区分开发环境打包跟生产环境打包

源码地址

一、初始化项目：

在你想生成文件的目录下，打开命令行执行 npm init 然后一路回车就行了，主要是生成一些项目基本信息。最后会生成一个 package.json 文件

二、安装webpack及脚手架

npm install webpack -D
npm install -D webpack-cli

三、ES6+转码为ES5及适思考配浏览器:

配置 ES6/7/8 转 ES5代码
安装相关依赖

npm install babel-loader @babel/core @babel/preset-env -D

根目录下新建一个src文件夹，然后再建一个main.js文件,写2句代码

// src/main.js
let i = 4.0;
console.log('hello webpack'+ i);

webpack.config.js文件
在项目根目录下增加webpack.config.js文件，然后写入下面这份简单的配置：

module.exports = {mode: 'development',// 指定开发者打包模式entry : './src/main.js',//入口文件output : {//输出文件filename : 'index.js',//输出文件名path :  __dirname+'/public'//输出文件路径},module : {rules: [{/*将js或者jsx文件转码成es5*/test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件exclude: /node_modules/,//排除这个文件夹use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},]},
}

然后在package.json的scripts先添加下面这个指令：

"build": "webpack --config ./webpack.config.js",

最后运行:

npm run build

可以看到根目录会生成一个public文件夹，而且下面有一个由src/main.js打包出来的index.js
思考：
babel-loader可以将ES6代码转为ES5代码，从而可以在现有环境执行，所以我们可以用ES6编写，而不用考虑环境支持的问题；有些浏览器版本的发布早于ES6的定稿和发布，因此如果在编程中使用了ES6的新特性，而浏览器没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器就会无法识别ES6代码，例如IE9根本看不懂代码写的let和const是什么东西？只能选择报错，这就是浏览器对ES6的兼容性问题；我们可以通过 babel-polyfill 对一些不支持新语法、兼容性差的客户端提供新语法的实现。

这个思考由你来完成吧，如果你不想加入可以跳过，不影响后面的操作

四、使用 html-webpack-plugin来创建html页面

1.安装html-webpack-plugin插件

npm install html-webpack-plugin -D

2.添加入口文件
在根目录下增加index.html文件，添加下面代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>hellow diyVue</title>
</head>
<body><div id="app"></div>
<script type="text/javascript" src="index.js"></script></body>
</html>

3.修改webpack.config.js配置

const path = require('path');
const HtmlWebpackplugin = require('html-webpack-plugin');
module.exports = {mode: 'development',// 指定开发者打包模式entry : './src/main.js',//入口文件output : {//输出文件filename : 'index.js',//输出文件名path :  __dirname+'/public'//输出文件路径},module : {rules: [{/*将js或者jsx文件转码成es5*/test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件exclude: /node_modules/,//排除这个文件夹use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},]},plugins:[new HtmlWebpackplugin({filename: 'index.html', // 打包后的文件名，默认是index.htmltemplate: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板})]
}

4.查看效果
运行npm run build ，我们可以看到public文件夹下有一个index.html生成了，而且还引入了src/main.js的压缩包index.js

五、安装配置并使用vue

1.安装插件及vue

npm install vue-loader vue-template-compiler cache-loader thread-loader -D
npm install vue -S

vue-loader 用于解析.vue文件
vue-template-compiler 用于编译模板
cache-loader 用于缓存loader编译的结果
thread-loader 使用 worker 池来运行loader，每个 worker 都是一个 node.js 进程。

2.修改webpack.config.js配置

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackplugin = require('html-webpack-plugin');
module.exports = {mode: 'development',// 指定开发者打包模式entry : './src/main.js',//入口文件output : {//输出文件filename : 'index.js',//输出文件名path :  __dirname+'/public'//输出文件路径},module : {rules: [{/*将js或者jsx文件转码成es5*/test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件exclude: /node_modules/,//排除这个文件夹use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},{test: /\.vue$/,use: [{loader: 'cache-loader'},{loader: 'thread-loader'},{loader: 'vue-loader',options: {compilerOptions: {preserveWhitespace: false},}}]},]},plugins:[new HtmlWebpackplugin({filename: 'index.html', // 打包后的文件名，默认是index.htmltemplate: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板}),new VueLoaderPlugin()]
}

3.使用vue
在 src 新建一个 App.vue：

<template><div class="App">Hello {{msg}}</div>
</template><script>
export default {name: 'App',data() {return {msg: "diyVue",};}
};
</script>

修改src/main.js的代码：

import Vue from 'vue'
import App from './App.vue'new Vue({render: h => h(App)
}).$mount('#app')

4.打包及运行vue
再次运行npm run build,然后在浏览器打开public/index.html，可以发现vue已经可以运行了

六、安装本地服务及代码热更新

1.安装webpack-dev-server

npm install webpack-dev-server -D

2.修改webpack.config.js配置

// ...devServer: { //node本地服务器host: '127.0.0.1',port: 8010},
// ...

3.在package.json的scripts中增加一行启动本地服务指令：

"dev": "webpack-dev-server --env.dev",

4.运行以及查看效果

运行npm run dev
浏览器打开http://127.0.0.1:8010/

我们可以发现本地服务已经成功启动了，而且当我们修改src/app.vue的代码后，浏览器是会自动刷新的(热更新)。一个简单的vue项目我们已经搭建出来了，之后我们可以像堆积木一样添加自己想要的功能了。
提醒:devServer生成的文件是存在我们电脑的内存中的，不在我们的硬盘上(不落盘)，可以通过查看public文件夹知道，我们改动代码后这文件夹下的内容是不会变更的。

七、安装Vue-Router组件

1.安装

npm install vue-router --save

2.创建相关文件及编写代码

新增视图组件在 src 目录下新增两个视图组件 src/view/page1.vue 和 src/view/page2.vue
page1:

<template><div class="page1"><h2>page1</h2></div>
</template>

page2:

<template><div class="page2"><h2>page2</h2></div>
</template>

在 src 目录下新增一个 router/index.js 文件

import Vue from 'vue'
import VueRouter from "vue-router";
import page1 from '../view/page1.vue';
import page2 from '../view/page2.vue';
Vue.use(VueRouter)
export default new VueRouter({mode: 'hash',routes: [{path: '/page1',component: page1},{path: '/page2',component: page2},{path: '*',redirect: '/page2'}]
})

修改 main.js 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'new Vue({router,render: h => h(App)
}).$mount('#app')

修改 App.vue 组件

<template><div><div class="App">Hello {{msg}}</div><div><router-link to="/page1">go page1</router-link><router-link to="/page2">go page2</router-link></div><div><router-view></router-view></div></div>
</template>
<script>
export default {name: 'App',data() {return {msg: "diyVue",};}
};
</script>

3.运行及测试效果

运行npm run dev
测试效果：

到此为止的文件目录是这样的：

八、一口气配置基础组件

通过前面的学习，相信你已经基本掌握了堆积木的操作，为了节省时间接下我们一次性添加多几个积木
1.安装基础组件

npm install sass-loader dart-sass css-loader style-loader file-loader url-loader postcss-loader autoprefixer -D

sass-loader, dart-sass主要是将 scss/sass 语法转为css
css-loader主要是解析 css 文件
style-loader 主要是将 css 解析到html页面的style上
postcss-loader autoprefixer实现自动添加css3前缀
2.在webpack.config.js中增加配置

// ...{test: /\.(scss|sass)$/,use: [{loader: 'style-loader'},{loader: 'css-loader'},{loader: 'sass-loader',options: {implementation: require('dart-sass')}},{loader: 'postcss-loader',options: {plugins: [require("autoprefixer") /*自动添加前缀*/]}}]},{test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,use: [{loader: 'url-loader',options: {limit: 10000}}]}// ...

3.运行及测试
在src/App.vue后面加入下面样式代码：

// ...
<style lang="scss" scoped>.App{color:red;}
</style>

运行后，我们可以看到样式代码生效了

九、自定义环境变量和常量

通过 webpack提供的DefinePlugin插件，可以很方便的定义环境变量
1.我们先创建一个用来以后保存常量的文件，在根目录下添加config/constant.js

const NODE_ENV = process.env.NODE_ENV; // webpack编译是获取node环境的配置信息
const config = {production: { // 生产环境(线上环境)DOMAIN: 'production.com', // 上线域名、地址FOO_API: 'production.foo.api.com', // api变量BAR_API: 'production.bar.api.com', // api变量BAZ_API: 'production.baz.api.com', // api变量},development: { // 开发环境DOMAIN: 'development.com', // 测试域名、地址FOO_API: 'development.foo.api.com', // api变量BAR_API: 'development.bar.api.com', // api变量BAZ_API: 'development.baz.api.com', // api变量}
}
module.exports = config[NODE_ENV];

2.修改webpack.config.js文件

const webpack = require('webpack');
const constant = require('./config/constant'); // 引入常量文件
// ...
plugins:[// ...new webpack.DefinePlugin({ // 定义全局变量CONSTANT: JSON.stringify(constant)})],

3.修改package.json

"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server","build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js","test": "echo \"Error: no test specified\" && exit 1"},

cross-env用来磨平mac和win中的node环境之间的不同，所以我们需要安装一下

npm install cross-env -D

NODE_ENV=development和NODE_ENV=production指定node环境

4.运行及调试

由于修改了webpack.config.js所以需要重新运行npm run dev
在src/main.js后面加上一句测试代码：console.log(CONSTANT);
配置成功打印出来

十、区分开发环境打包跟生产环境打包

在config下新建两个文件

webpack.dev.js 开发环境使用
webpack.prod.js 生产环境使用
webpack.config.js 公用配置

公共配置webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackplugin = require('html-webpack-plugin');
const webpack = require('webpack');
const constant = require('./config/constant'); // 引入常量文件
module.exports = {entry : './src/main.js',//入口文件output : {//输出文件filename : 'index.js',//输出文件名path :  __dirname+'/public',//输出文件路径// publicPath: "public", // 虚拟目录，自动指向path编译目录，放在内存中，所以在硬盘上是找不到的 默认是：/},module : { // 当执行require或import命令时匹配下面的加载规则rules: [{/*将js或者jsx文件转码成es5*/test: /\.jsx?$/,// 正则惰性匹配后缀名为js或者jsx的文件exclude: /node_modules/,//排除这个文件夹use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},{ // vue文件处理test: /\.vue$/,use: [{loader: 'cache-loader'},{loader: 'thread-loader'},{loader: 'vue-loader',options: {compilerOptions: {preserveWhitespace: false},}},]},// { // 文件资源加载 变成base64会跟下面图片资源处理冲突所以注释了//     test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,//     use: [{//       loader: 'url-loader',//       options: {//           name: '[name].[ext]'//       }//     }]// },{ // 图片资源处理test: /\.(png|jpg|gif|svg)/,use: [{loader: "file-loader",options: {name: '[name].[ext]',outputPath: "public/assets/", // 输出目录limit: 8192,}}]}]},plugins:[new HtmlWebpackplugin({filename: 'index.html', // 打包后的文件名，默认是index.htmltemplate: path.resolve(__dirname, 'index.html') // 导入被打包的文件模板}),new VueLoaderPlugin(),new webpack.DefinePlugin({ // 定义全局变量CONSTANT: JSON.stringify(constant)})],
}

开发环境

不需要压缩代码
需要本地服务和热更新
css不需要提取到css文件
sourceMap

const merge = require('webpack-merge')
const webpackConfig = require('../webpack.config')
module.exports = merge(webpackConfig, {devtool: 'cheap-module-eval-source-map',mode: 'development',// 指定开发者打包模式devServer: { //node本地服务器host: '127.0.0.1',port: 8010},module : {rules: [{test: /\.(scss|sass)$/,use: [{loader: 'style-loader'},{loader: 'css-loader'},{loader: 'sass-loader',options: {implementation: require('dart-sass')}},{loader: 'postcss-loader',options: {plugins: [require("autoprefixer") /*自动添加前缀*/]}}]},]},
})

生产环境

压缩代码
不需要本地服务和热更新
提取css，压缩css文件
sourceMap
构建前清除上一次构建的内容

const path = require('path')
const merge = require('webpack-merge')
const webpack = require('webpack')
const webpackConfig = require('../webpack.config')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssnanoPlugin = require('@intervolga/optimize-cssnano-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = merge(webpackConfig, {mode: 'production',// 指定开发者打包模式压缩js代码devtool: '#source-map',optimization: {splitChunks: {cacheGroups: {vendors: {name: 'chunk-vendors',test: /[\\\/]node_modules[\\\/]/,priority: -10,chunks: 'initial'},common: {name: 'chunk-common',minChunks: 2,priority: -20,chunks: 'initial',reuseExistingChunk: true}}}},module: {rules: [{test: /\.(scss|sass)$/,use: [{loader: MiniCssExtractPlugin.loader},{loader: 'css-loader',options: {importLoaders: 2}},{loader: 'sass-loader',options: {implementation: require('dart-sass')}},{loader: 'postcss-loader',options: {plugins: [require("autoprefixer") /*自动添加前缀*/]}}]},]},plugins: [new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',chunkFilename: 'css/[name].[contenthash:8].css'}),new OptimizeCssnanoPlugin({sourceMap: true,cssnanoOptions: {preset: ['default',{mergeLonghand: false,cssDeclarationSorter: false}]}}),new CopyWebpackPlugin([{from: path.resolve(__dirname, '../public'),to: path.resolve(__dirname, '../dist')}]),new CleanWebpackPlugin(), // 用于删除上次构建的文件]
})

安装所需依赖

npm i @intervolga/optimize-cssnano-plugin mini-css-extract-plugin clean-webpack-plugin webpack-merge copy-webpack-plugin -D

@intervolga/optimize-cssnano-plugin 用于压缩css代码
mini-css-extract-plugin 用于提取css到文件中
clean-webpack-plugin 用于删除上次构建的文件
webpack-merge 合并 webpack配置
copy-webpack-plugin 用户拷贝静态资源

图片资源路径名使用
修改src/App.vue

<template><div><div class="App"><img :src="imgUrl1"><div>Hello {{msg}}</div></div><div><router-link to="/page1">go page1</router-link><router-link to="/page2">go page2</router-link></div><div><router-view></router-view></div></div>
</template>
<script>
export default {name: 'App',data() {return {msg: "diyVue",imgUrl1: require('./assets/logo.png'),};}
};
</script>
<style lang="scss" scoped>.App{color:red;}
</style>

这次的操作优化了图片资源的引用，我们执行npm run dev后，在浏览器打开项目，可以看到

优化前这个路径是base64位的，现在变成了一个普通的路径。

总结：

vue-cli是一个封装得很完美的vue脚手架，所以它的适应性很强；但是有些大公司他们的前端项目一般不会直接套用这种脚手架，而是需要结合公司内部的组件一步步搭起一个vue前端项目。
单纯的vue架构是非常简单的，但是结合到node环境和webpack一起用的话，有一些不是太熟悉node、webpack的前端同学就会有些蒙圈。这个案例中，我们主要是搭建好了一个webpack环境，然后将需要的东西一件一件组装起来，虽然不算太完善，但是学会了这种思路的话，我们处理其他前端项目也不难了。

如果帮助到你了，就点赞，哈哈哈，不可能有赞的！