[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的开发环境吗？流程是什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。