前言
對于vue-cli的強大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻
最近在看webpack4，深感知識淺薄，這兩天也一直在思考cli的配置，借助一些別人的實踐，嘗試自己搭建vue的項目，這里使用webpack4版本，之前我在網上查找別人的vue項目搭建,但是都是webpack3的,所以寫了本文，如果有錯誤,或者有什么問題,請大佬們指出
關于webpack的本文不會多說，請看webpack文檔
關于本文的github地址vue-MYCLI
你們的start是我發表的動力!!!!!
前置知識
•熟悉 webpack4
•熟悉 vue
搭建基本骨架
npm init
安裝webpack4
npm install webpack webpack-cli --save-dev
在開始之前先實驗一下環境
根目錄新建文件 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>Vue</title></head><body> <script src="./src/mian.js"></script></body></html>
根目錄新建文件 src/main.js
console.log("我是main");
根目錄新建文件webpack.config.js
const path = require('path')module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, dist), filename: 'index.js' } }打包js文件
npx webpack --config webpack.config.js
會看到一些報錯,只要構建成功就ok
這里說明環境是沒有問題的
配置初始生成環境
開始安裝vue-loader吧
npm i webpack vue vue-loader -D //-D就是--save-dev
安裝完成后看輸出
提示安裝的依賴要安裝
npm install webpack css-loader -D
安裝完畢后新建src/app.vue
<template> <div> 你好 {{ data }} </div></template><script> export default { data(){ return { data: "Vue" } } }</script><style scoped></style>.vue文件是無法直接運行的,需要在webpack里面配置loader
這里參照某課的老師的方法,html用webpack生成(后面說明)
在根目錄新建index.js 刪除index.html
import Vue from 'vue'import App from './app.vue'const root = document.createElement('div')document.body.appendChild(root)new Vue({ render: (h) => h(App)}).$mount(root)改寫webpack.config.js
const path = require('path')module.exports = { entry: path.resolve(__dirname, 'src/index.js'), //關于path模塊可以看看阮一峰的教程 http://javascript.ruanyifeng.com/nodejs/path.html#toc0 output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js' }, module: { rules: [{ test: //.vue$/, loader: 'vue-loader' }] }}在package里面添加腳本
"build": "webpack --config webpack.config.js"
控制臺運行
npm run build
不出意外會報錯
這里有2個問題,一個是沒有指定mode 一個是沒有引用vue的插件
我們需要改寫webpack.config.js,在config里面加一行
mode: 'production', //暫時指定為生產環境
再次運行npm run build 會報錯,需要安裝一個包
這個報錯,原本在vue-loader就有提示,不知道為什么現在沒有,運行之前報錯
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options
安裝vue-template-compiler
npm install vue-template-compiler -D
再再次運行npm run build
假如按步驟來不除意外這里可以打包成功了~~~~
我們需要驗證打包文件時候是否正確,所以這里使用插件HtmlWebpackPlugin,幫我們自動創建html文件,并且在后續的hash文件名上很有用,具體可以看官方介紹
npm install html-webpack-plugin -D
改webpack.config.js代碼
const path = require('path')const { VueLoaderPlugin } = require('vue-loader') var HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件module.exports = { mode: 'production', //暫時指定為生產環境 entry: path.resolve(__dirname, 'src/index.js'), //關于path模塊可以看看阮一峰的教程 http://javascript.ruanyifeng.com/nodejs/path.html#toc0 output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js' }, module: { rules: [{ test: //.vue$/, loader: 'vue-loader' }] }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin() ]}npm run build打包一下,dist文件夾下面會有兩個文件
啟動一個靜態服務器
打包Vue程序完成~~~~
至此完成了最基本的webpack配置
接下來我們要完成的的配置開發環境
配置開發環境
關于開發環境以及生成環境,webpack是需要區分的,根據文檔模塊,我決定在命令里面指定模式,相應的就將開發環境以及生成環境分開,
這里我使用的是提起基本的webpack配置使用webpack-merge這個包來拼接我們webpack配置
npm i webpack-merge -D
修改配置文件
將各各環境的代碼區分開,webpack的結構是這樣的
webpack.config.base.js
const path = require('path')const config = { entry: path.resolve(__dirname, '../src/index.js'), output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js' }, module: { rules: [{ test: //.vue$/, loader: 'vue-loader' }] }}module.exports = config
webpack.config.build.jsconst { VueLoaderPlugin } = require('vue-loader')const HtmlWebpackPlugin = require('html-webpack-plugin')const merge = require('webpack-merge')const baseConfig = require('./webpack.config.base')const config = merge(baseConfig ,{ plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin() ]})module.exports = config
這里配置開發環境就是重頭戲了,我們使用webpack-dev-server
webpack-dev-server是一個小型的Node.js Express服務器,代碼都跑在內存里面
安裝webpack-dev-server
npm install webpack-dev-server -Dwebpack.config.dev.jsconst webpack = require('webpack')const merge = require('webpack-merge')const baseConfig = require('./webpack.config.base')const { VueLoaderPlugin } = require('vue-loader')const HtmlWebpackPlugin = require('html-webpack-plugin')const config = merge(baseConfig, { devServer: { port: '8000', host: 'localhost', hot: true, //熱加載 //quiet: true //控制臺中不輸出打包的信息 }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin(), new webpack.HotModuleReplacementPlugin() ]})module.exports = config最后在package里面添加腳本
"build": "webpack --mode=production --config build/webpack.config.build.js",
"dev": "webpack-dev-server --mode=development --progress --config build/webpack.config.dev.js"
執行npm run dev查看控制臺
這就成功了,在瀏覽器里面輸入http://localhost:8000/,修改app.vue文件,實現了vue-cli的熱加載了~~~~
接下來完善一下,不能只有.vue文件的loader,其他的webpack也要認識
我們配置一下圖片的loader,以及css的loader,同時css使用postcss進行預處理
url-loader 用于將文件轉換為base64 URI file-loader是依賴loader
npm i url-loader file-loader -D
添加配置webpack.config.base.js>module>rules
{ test: //.(gif|png|jpg|svg)$/, use: [{ loader: 'url-loader', options: { limit: 2048, name: 'resources/[path][name].[hash:8].[ext]' } }] },配置css(vue-cli里面的實現非常友好,有機會可以去看看) 下面的是最簡單的配置
npm install css-loader -Dnpm install style-loader -Dnpm install postcss-loader -D
添加配置webpack.config.base.js>module>rules (postcss不了解谷歌一下)
{ test: //.css$/, use: [ 'css-loader', 'style-loader', { loader: 'postcss-loader', options: { sourceMap: true //啟用源映射支持，postcss-loader將使用其他加載器給出的先前源映射并相應地更新它 } } ] }npm install autoprefixer -D根目錄新建文件postcss.config.js,安裝autoprefixer (自動添加瀏覽器前綴)
const autoprofixer = require('autoprefixer')module.exports = { plugins: [ autoprofixer() ]}配置到這里基本的圖片以及css就配置完成了,運行一下試試 npm run dev
我找src下面創建了assets/img/user.jpg
app.vue
<template> <div> 你好 {{ data }} <img src="./assets/img/user.jpg"> </div></template><script> export default { data(){ return { data: "Vue Cli" } } }</script><style>div{ font-size: 20px; color: red;}img { width: 100px;}</style>
實現了開發環境的圖片以及css的配置
打包一下試試
build后生成的目錄是這樣的
這不是我們想要的,webpack把代碼,類庫,css都打包在一起,這樣不管是上線還是首屏加載都有影響,所以這里我們要優化webpack
在處理之前想安裝一個可以幫助我們每次build之前自動刪除上次build生成的文件的插件
clean-webpack-plugin這個插件不知道為什么,怎么配置路徑都沒效果
這里我使用rimraf來進行刪除(vue-cli也是使用rimraf,但是他是寫在代碼里面)
npm install rimraf -D
在package里面變一下腳本,讓打包之前幫我們刪除之前到打包文件
"build-webpack": "webpack --mode=production --config build/webpack.config.build.js",
"delete": "rimraf dist",
"build": "npm run delete && npm run build-webpack"
分離打包css
它會將所有的入口 chunk(entry chunks)中引用的 *.css，移動到獨立分離的 CSS 文件
npm install extract-text-webpack-plugin@next -D
因為開發環境和生產環境不一樣
我們需要將css部分的代碼分環境配置
1.將原先的css配置放到webpack.config.dev.js里面
2.在webpack.config.build.js里面重寫
module: { rules: [{ test: //.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [ 'css-loader', { loader: 'postcss-loader', options: { sourceMap: true } } ] }) }] },這樣的話,我們開發環境不影響依舊是之前到模式,build的時候用ExtractTextPlugin幫我們分離非js文件,實現css的分離打包
我們打包一下試試npm run build
分離js文件
接下來是分離js文件,就是將庫文件以及我們的代碼分離開,利于上線后的瀏覽器緩存,代碼會經常變,庫不會經常變
在webpack4之前js分離用的插件是CommonsChunkPlugin,不過這插件現在移除了,現在用的是optimization.splitChunks 來進行公共代碼與第三方代碼的提取,splitChunks參數如下
optimization: { splitChunks: { chunks: "initial", // 代碼塊類型 必須三選一： "initial"（初始化） | "all"(默認就是all) | "async"（動態加載） minSize: 0, // 最小尺寸，默認0 minChunks: 1, // 最小 chunk ，默認1 maxAsyncRequests: 1, // 最大異步請求數， 默認1 maxInitialRequests: 1, // 最大初始化請求書，默認1 name: () => {}, // 名稱，此選項課接收 function cacheGroups: { // 緩存組會繼承splitChunks的配置，但是test、priorty和reuseExistingChunk只能用于配置緩存組。 priority: "0", // 緩存組優先級 false | object | vendor: { // key 為entry中定義的 入口名稱 chunks: "initial", // 必須三選一： "initial"(初始化) | "all" | "async"(默認就是異步) test: /react|lodash/, // 正則規則驗證，如果符合就提取 chunk name: "vendor", // 要緩存的 分隔出來的 chunk 名稱 minSize: 0, minChunks: 1, enforce: true, reuseExistingChunk: true // 可設置是否重用已用chunk 不再創建新的chunk } } } }官方包括這解釋,我并不是很看懂,所以打包策略并不是很好
在webpack.config.build.js>config
output: { filename: '[name].[chunkhash:8].js' },optimization: { splitChunks: { chunks: "all", cacheGroups: { vendor: { test: /node_modules/, //這里雖然分離了,但是沒有做到按需引入,看官方配置也不是很明白 name: 'vendors', chunks: 'all' } } }, runtimeChunk: true }build一下查看目錄,可以看出代碼與庫之間分離了
關于eslint,我就不引入的,有興趣可以討論一下
.gitignore
這里處理一下git 新建文件.gitignore
.DS_Storenode_modules//dist/npm-debug.log*yarn-debug.log*yarn-error.log*# Editor directories and files.idea.vscode*.suo*.ntvs**.njsproj*.sln.editorconfig,
處理一下編譯器的統一配置
新建文件 .editorconfig,(關于editorconfig,以及配置解釋)
root = true[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true
還有一點要注意,假如沒有效果,vscode需要安裝一個插件EditorConfig for VS Code,其他編譯器不太清楚
.babelrc
處理一下ES6,以及js文件的webpack的loader配置
今天裝了babel-loader8.0.0 報錯報一上午,心態都搞崩了,所以這里我使用的是7版本
npm install babel-loader@7 babel-core babel-preset-env -D
在webpack.config.base.js>module>rules里面添加代碼
{ test: //.js$/, exclude: /node_modules/, loader: 'babel-loader'}新建文件 .babelrc
{ "presets": [ "env" ]}首先檢查開發環境
我新建了一個es6語法的js 導入到app.vue里面
運行結果
最后
至此,基本的vue項目骨架的搭建完畢了,當然他沒有vue-cli那么強大,或許最大的益處是讓我們熟悉一個vue項目的大致webpack配置,當然我們可以一步一步的優化項目，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
