[vue-cli]不用vue-cli，你自己有搭建過(guò)vue的開(kāi)發(fā)環(huán)境嗎？流程是什么？

基本概念 首先先了解先webpack的基本概念，webpack屬于一個(gè)構(gòu)建工具，主要有mode、entry、output、loader、plugin這幾部分組成。 目標(biāo) 本文會(huì)帶你實(shí)現(xiàn)一個(gè)簡(jiǎn)易的vuecli具備和官方幾乎一樣的功能 實(shí)現(xiàn)移動(dòng)端適配 使用eslint進(jìn)行語(yǔ)法檢查 進(jìn)行開(kāi)發(fā)和生產(chǎn)環(huán)境區(qū)分安裝 首先先創(chuàng)建好以下目錄config是配置目錄，src是vue的目錄，其中src目錄下的server.js、client.js、entry-server.js、router.js不需要，這些屬于ssr的配置部分，不在本次范圍內(nèi)。通過(guò)npm進(jìn)行安裝webpack// 沒(méi)有npm的請(qǐng)先安裝node.js（百度or谷歌） 通過(guò)npm init創(chuàng)建好一個(gè)package.json// 安裝webpack webpack-cli npm install webpack webpack-cli -D// 或者使用yarn yarn add webpack webpack-cli -D 復(fù)制代碼編寫(xiě)基本配置實(shí)現(xiàn)一個(gè)簡(jiǎn)單的打包 新建src/index.js， 作為我們的入口文件// src/index.js console.log('hello world') 復(fù)制代碼// 首先現(xiàn)在config目錄下創(chuàng)建webpack.base.config.js，這里放基礎(chǔ)配置// webpack.base.config.js const path = require('path')module.exports = {// webpack4新增，用于區(qū)分環(huán)境，有development、production、none三種mode: 'development',// entry接收一個(gè)字符串或者一個(gè)對(duì)象，作為webpack的入口，多頁(yè)面的話，就是多個(gè)入口entry: {main: 'src/index.js'}，output: {path: path.join(__dirname, '../dist'),// [name]是一個(gè)命名模板，可以根據(jù)entry動(dòng)態(tài)生成名字，hash是一個(gè)哈希值,默認(rèn)32位，這里只截取8位filename: '[name].[hash:8].js'} }復(fù)制代碼然后在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"} } 復(fù)制代碼然后就可以通過(guò)npm run build進(jìn)行打包，一個(gè)最基礎(chǔ)的配置就算完成了，當(dāng)然這些還遠(yuǎn)遠(yuǎn)不夠，距離要完成的部分還有很多。 配置開(kāi)發(fā)環(huán)境 由于項(xiàng)目需要區(qū)分開(kāi)發(fā)環(huán)境還是線上環(huán)境，我們需要一個(gè)環(huán)境變量去維護(hù) // config/env.js const process = require('process') const env = process.env.NODE_ENVmodule.exports = env 復(fù)制代碼配置熱更新 npm install webpack-dev-server webpack-merge html-webpack-plugin friendly-errors-webpack-plugin -D/*webpack-dev-server 開(kāi)啟一個(gè)server 用于熱更新，需要在插件配置webpack.HotModuleReplacementPlugin()html-webpack-plugin 讓webpack支持htmlfriendly-errors-webpack-plugin 用于輸出錯(cuò)誤webpack-merge 用于合并webpack配置 */ 復(fù)制代碼// 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,// 在瀏覽器顯示錯(cuò)誤和警告overlay: {warnings: true,errors: true},// 去除掉每次修改時(shí)，控制臺(tái)的日志clientLogLevel: 'none'},plugins: [new webpack.HotModuleReplacementPlugin(),// 注入到webpack，添加環(huán)境變量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: ['項(xiàng)目成功啟動(dòng)，地址是localhost:8080']}})] })module.exports = devConfig 復(fù)制代碼 安裝依賴// 由于各個(gè)平臺(tái)有些差異，我們需要安裝cross-env npm install cross-env -D 復(fù)制代碼 添加命令，并修改package.json/*cross-env 區(qū)分平臺(tái)差異--open 打開(kāi)瀏覽器--progress 顯示進(jìn)度--colors 區(qū)分顏色--config 需要運(yùn)行的配置目錄，默認(rèn)webpack.config.js NODE_ENV 當(dāng)前的環(huán)境變量 */ "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"} 復(fù)制代碼然后運(yùn)行npm run serve就可以看到如下效果，然后你就可以各種改了，不用自己手動(dòng)刷新頁(yè)面了配置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 通過(guò)postcss給瀏覽器不支持的css加前綴 @moohng/postcss-px2vw 處理移動(dòng)端適配，使用px轉(zhuǎn)vw 不支持的轉(zhuǎn)rem sass-loader node-sass 處理sass scss文件，因?yàn)槲矣玫氖沁@個(gè)，less換成less-loader即可 vue-loader 處理vue文件 mini-css-extract-plugin 提取項(xiàng)目中的css到一個(gè)單獨(dú)的文件 babel-loader @babel/preset-env @babel/core 處理js兼容 url-loader responsive-loader 處理圖片，小于一定大小轉(zhuǎn)成base64 eslint-loader eslint-config-standard eslint-plugin-vue 對(duì)js vue進(jìn)行語(yǔ)法檢查，采用eslint-config-standard規(guī)范，不想要的可以忽略 復(fù)制代碼修改之前的配置，改為下面的樣子 // 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可以不帶擴(kuò)展enforceExtension: false,// 自動(dòng)解析確定的擴(kuò)展extensions: ['.js', '.vue']},plugins: [new VueLoaderPlugin(),new MiniCssExtractPlugin({filename: '[name].[contentHash:8].css'})] }復(fù)制代碼新建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'] } 復(fù)制代碼新建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復(fù)制代碼修改src/index.js // App.vue 和vuecli一樣，作為個(gè)入口文件 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')復(fù)制代碼至此 webpack開(kāi)發(fā)版、基礎(chǔ)配置就已經(jīng)完成，現(xiàn)在可以運(yùn)行npm run serve進(jìn)行修改了 編寫(xiě)生產(chǎn)環(huán)境配置 生產(chǎn)環(huán)境需要做的就是打包頁(yè)面生成dist文件，并對(duì)頁(yè)面進(jìn)行優(yōu)化分包繼續(xù)安裝依賴npm install clean-webpack-plugin terser-webpack-plugin optimize-css-assets-webpack-plugin progress-bar-webpack-plugin cssnano -D/* clean-webpack-plugin 每次打包的時(shí)候清除掉之前打包的 terser-webpack-plgugin 對(duì)代碼做混淆壓縮，去掉console日志 optimize-css-assets-webpack-plugin 壓縮css progress-bar-webpack-plugin 以進(jìn)度條的形式輸出打包日志 */ 復(fù)制代碼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: {// 對(duì)代碼進(jìn)行代碼分割，生成公共包splitChunks: {chunks: 'all',minSize: 0, // 生產(chǎn)塊的最小大小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')}),// 去掉沒(méi)用的css// new PurgecssPlugin({// paths: glob.sync(path.join(__dirname, 'src'))// }),new ProgressBarPlugin({callback: function (res) {console.log('打包完成')}})] })module.exports = prodConfig

總結(jié)

以上是生活随笔為你收集整理的[vue-cli]不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。