[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？

基本概念 首先先了解先webpack的基本概念，webpack属于一个构建工具，主要有mode、entry、output、loader、plugin这几部分组成。 目标 本文会带你实现一个简易的vuecli具备和官方几乎一样的功能 实现移动端适配 使用eslint进行语法检查 进行开发和生产环境区分安装 首先先创建好以下目录config是配置目录，src是vue的目录，其中src目录下的server.js、client.js、entry-server.js、router.js不需要，这些属于ssr的配置部分，不在本次范围内。通过npm进行安装webpack// 没有npm的请先安装node.js（百度or谷歌） 通过npm init创建好一个package.json// 安装webpack webpack-cli npm install webpack webpack-cli -D// 或者使用yarn yarn add webpack webpack-cli -D 复制代码编写基本配置实现一个简单的打包 新建src/index.js， 作为我们的入口文件// src/index.js console.log('hello world') 复制代码// 首先现在config目录下创建webpack.base.config.js，这里放基础配置// webpack.base.config.js const path = require('path')module.exports = {// webpack4新增，用于区分环境，有development、production、none三种mode: 'development',// entry接收一个字符串或者一个对象，作为webpack的入口，多页面的话，就是多个入口entry: {main: 'src/index.js'}，output: {path: path.join(__dirname, '../dist'),// [name]是一个命名模板，可以根据entry动态生成名字，hash是一个哈希值,默认32位，这里只截取8位filename: '[name].[hash:8].js'} }复制代码然后在package.json的scripts里面添加一条build命令 // package.json {"name": "webpack","version": "1.0.0","description": "","main": "","dependencies": {"vue": "^2.6.10"},"scripts": {"build": "webpack --config config/webpack.base.config.js","test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"webpack": "^4.34.0","webpack-cli": "^3.3.4"} } 复制代码然后就可以通过npm run build进行打包，一个最基础的配置就算完成了，当然这些还远远不够，距离要完成的部分还有很多。 配置开发环境 由于项目需要区分开发环境还是线上环境，我们需要一个环境变量去维护 // config/env.js const process = require('process') const env = process.env.NODE_ENVmodule.exports = env 复制代码配置热更新 npm install webpack-dev-server webpack-merge html-webpack-plugin friendly-errors-webpack-plugin -D/*webpack-dev-server 开启一个server 用于热更新，需要在插件配置webpack.HotModuleReplacementPlugin()html-webpack-plugin 让webpack支持htmlfriendly-errors-webpack-plugin 用于输出错误webpack-merge 用于合并webpack配置 */ 复制代码// webpack.dev.config.jsconst webpack = require('webpack') const path = require('path') const env = require('./env') const webpackBaseConfig = require('./webpack.base.config') const HtmlWebpackPlugin = require('html-webpack-plugin') const merge = require('webpack-merge') const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')const devConfig = merge(webpackBaseConfig, {devServer: {contentBase: path.join(__dirname, 'src'),host: 'localhost',port: 8080,hot: true,compress: true,noInfo: true,// 在浏览器显示错误和警告overlay: {warnings: true,errors: true},// 去除掉每次修改时，控制台的日志clientLogLevel: 'none'},plugins: [new webpack.HotModuleReplacementPlugin(),// 注入到webpack，添加环境变量new webpack.DefinePlugin({'process.env': JSON.stringify(env)}),// plugin的解析顺序是从前往后的new HtmlWebpackPlugin({title: 'hello world',filename: 'index.html',template: './src/page/index.html',inject: true}),new FriendlyErrorsWebpackPlugin({compilationSuccessInfo: {messages: ['项目成功启动，地址是localhost:8080']}})] })module.exports = devConfig 复制代码 安装依赖// 由于各个平台有些差异，我们需要安装cross-env npm install cross-env -D 复制代码 添加命令，并修改package.json/*cross-env 区分平台差异--open 打开浏览器--progress 显示进度--colors 区分颜色--config 需要运行的配置目录，默认webpack.config.js NODE_ENV 当前的环境变量 */ "scripts": {"serve": "cross-env NODE_ENV=development webpack-dev-server --open --progress --colors --config config/webpack.dev.config.js","build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.config.js","test": "echo \"Error: no test specified\" && exit 1"} 复制代码然后运行npm run serve就可以看到如下效果，然后你就可以各种改了，不用自己手动刷新页面了配置loader解析，并提取css npm install css-loader style-loader postcss-loader url-loader babel-loader @babel/preset-env @babel/core sass-loader node-sass responsive-loader vue-loader eslint-loader mini-css-extract-plugin autoprefixer VueLoaderPlugin @moohng/postcss-px2vw -Dcss-loader style-loader 用于处理css postcss-loader 可以使用 autoprefixer 通过postcss给浏览器不支持的css加前缀 @moohng/postcss-px2vw 处理移动端适配，使用px转vw 不支持的转rem sass-loader node-sass 处理sass scss文件，因为我用的是这个，less换成less-loader即可 vue-loader 处理vue文件 mini-css-extract-plugin 提取项目中的css到一个单独的文件 babel-loader @babel/preset-env @babel/core 处理js兼容 url-loader responsive-loader 处理图片，小于一定大小转成base64 eslint-loader eslint-config-standard eslint-plugin-vue 对js vue进行语法检查，采用eslint-config-standard规范，不想要的可以忽略 复制代码修改之前的配置，改为下面的样子 // webpack.base.config.jsconst path = require('path') const env = require('./env') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {mode: env,entry: {main: './src/index.js'},output: {path: path.join(__dirname, '../dist'),publicPath: '/',filename: '[name].[hash:8].js',chunkFilename: '[name].[chunkhash].js'},module: {/*** webpack loader 加载顺序* mini/style,css,postcss,sass/less/stylus*/rules: [{test: /\.css$/,// loader的解析顺序是从后往前的，所以mini要放前面use: [{loader: MiniCssExtractPlugin.loader}, 'css-loader', 'postcss-loader']},{test: /\.(sass|scss)/,use: [{loader: MiniCssExtractPlugin.loader}, 'css-loader', 'postcss-loader', 'sass-loader']},{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {fallback: 'responsive-loader',limit: 4096,quality: 50,name: '[name].[hash:8].[ext]',outputPath: 'assets'}}]},{test: /\.vue$/,use: ['vue-loader']},{test: /\.js$/,exclude: /node_modules/,use: ['babel-loader', 'eslint-loader']},{enforce: 'pre',test: /\.(js)$/,loader: 'eslint-loader',exclude: /node_modules/}]},// 配置别名resolve: {alias: {'@': path.resolve(__dirname, 'src'),'~': path.resolve(__dirname, 'src/assets')},// false可以不带扩展enforceExtension: false,// 自动解析确定的扩展extensions: ['.js', '.vue']},plugins: [new VueLoaderPlugin(),new MiniCssExtractPlugin({filename: '[name].[contentHash:8].css'})] }复制代码新建babel.config.js、postcss.config.js、.eslintrc.js // 这边是babel7的配置 // babel.config.js module.exports = {presets: [['@babel/env']],// 支持异步加载plugins: ['@babel/plugin-syntax-dynamic-import'] }// postcss.config.js module.exports = {plugins: {autoprefixer: {},'@moohng/postcss-px2vw': {viewportWidth: 750,rootValue: 750,unitPrecision: 6,minPixelValue: 1}} } // .eslintrc.js module.exports = {root: true,extends: 'standard',env: {es6: true,node: true},plugins: ['vue'] } 复制代码新建router/router.js // router.js import Vue from 'vue' import Router from 'vue-router' import Home from '../views/home'Vue.use(Router)const router = new Router({mode: 'history',routes: [{path: '/',name: 'home',component: Home}] }) export default router复制代码修改src/index.js // App.vue 和vuecli一样，作为个入口文件 import Vue from 'vue' import app from './App.vue' import router from './router/router'Vue.config.productionTip = falsenew Vue({router,render: h => h(app) }).$mount('#app')复制代码至此 webpack开发版、基础配置就已经完成，现在可以运行npm run serve进行修改了 编写生产环境配置 生产环境需要做的就是打包页面生成dist文件，并对页面进行优化分包继续安装依赖npm install clean-webpack-plugin terser-webpack-plugin optimize-css-assets-webpack-plugin progress-bar-webpack-plugin cssnano -D/* clean-webpack-plugin 每次打包的时候清除掉之前打包的 terser-webpack-plgugin 对代码做混淆压缩，去掉console日志 optimize-css-assets-webpack-plugin 压缩css progress-bar-webpack-plugin 以进度条的形式输出打包日志 */ 复制代码const webpack = require('webpack') // const path = require('path') // const glob = require('glob') const env = require('./env') const merge = require('webpack-merge') const webpackBaseConfig = require('./webpack.base.config') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const TerserPlugin = require('terser-webpack-plugin') const ProgressBarPlugin = require('progress-bar-webpack-plugin') const OptimizationCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // const PurgecssPlugin = require('purgecss-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin')const prodConfig = merge(webpackBaseConfig, {optimization: {// 对代码进行代码分割，生成公共包splitChunks: {chunks: 'all',minSize: 0, // 生产块的最小大小maxSize: 0,name: true,cacheGroups: {commons: {name: 'commons',chunks: 'all',minChunks: 2}}},minimizer: [new TerserPlugin({sourceMap: env === 'development',terserOptions: {cache: true,compress: {drop_debugger: true,drop_console: true}}})]},stats: {modules: false,source: false},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: 'hello world',filename: 'index.html',template: './src/page/index.html',inject: true}),new webpack.DefinePlugin({'process.env': JSON.stringify(env)}),// 压缩cssnew OptimizationCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano')}),// 去掉没用的css// new PurgecssPlugin({// paths: glob.sync(path.join(__dirname, 'src'))// }),new ProgressBarPlugin({callback: function (res) {console.log('打包完成')}})] })module.exports = prodConfig

总结

以上是生活随笔为你收集整理的[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。