日常在工做開發中,爲了效率咱們一般都會直接使用Vue-cli腳手架去搭建Vue開發環境,確實這種工具是節省了咱們很多時間,可是你有沒有想過Vue開發環境是如何搭建起來的?還有若是是你本身動手去搭建,能順利搭建起來嗎?css
基於這些想法,我就搗鼓了一下webpack4,而且弄下來了這個小項目,感受一個小項目下來收貨仍是挺大的,因此就寫一遍文章,分享心得,哈哈!!html
基於我的的時間精力問題,把本項目教程分爲兩部分:vue
但願你能把教程看完,而且能收貨到你想要的東西,嘻嘻,好了,開始!!webpack
鑑於文章篇幅的長度,本教程不會詳細講述webpack4的知識點,若是對搭建步驟有什麼疑惑的或者有知識點看不懂的,能夠先自行Google搜索一下,我悄悄跟你說,webpack4仍是有不少坑的,可是所謂的進步就是不斷不斷地踩坑(捂臉表情)!!git
在命令行中運行npm init -y
初始化項目,生產package.json
文件github
npm i webpack webpack-cli --save-dev
web
webpack.base.dev.js基本配置 vue-router
在修改package.json
文件裏的scripts
配置vuex
在main.js
裏面輸入document.write("Hello World")
npm
根據上述圖片配置webpack.base.dev.js
文件
在命令行中運行npm run test
命令,dist文件夾裏會有js文件生成
在index.html
引入,若成功輸出Hello World
即證實webpack運行環境配置成功...
Vue運行環境分爲開發環境和生產環境,不一樣的環境對功能的實現要求也是不同的,好比生產環境須要壓縮代碼,而開發環境須要sourceMap便於調試,而這兩種環境也有公共的配置!!
接下來在下面我會慢慢講述不一樣環境須要實現的功能
在build裏面新建文件
webpack.base.conf.js
公共配置文件webpack.dev.conf.js
開發環境配置文件webpack.prod.conf.js
生產環境配置文件webpack.base.conf.js
是公共配置文件,須要實現如下功能 :
在package.json
文件裏面scripts
配置運行腳本命令 :
"test":"webpack --config build/webpack.base.conf.js"
在命令行上運行npm run test
便可運行webpack.base.conf.js
配置文件
webpack.dev.conf.js
是開發環境配置文件,該環境注重調試效率:
postcss-loader
自動添加前綴在package.json
文件裏面scripts
配置運行腳本命令 :
"dev":"cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
在命令行上運行npm run dev
便可運行webpack.dev.conf.js
配置文件
webpack.prod.conf.js
是生產環境配置文件,該環境注重壓縮代碼和性能:
mini-css-extract-plugin
抽離樣式爲單獨css文件postcss-loader
自動添加前綴clean-webpack-plugin
每次打包清理建立的dist文件夾optimize-css-assets-webpack-plugin
壓縮css文件代碼terser-webpack-plugin
壓縮JS文件代碼在package.json
文件裏面scripts
配置運行腳本命令 :
"build":"cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js"
在命令行上運行npm run build
便可運行webpack.prod.conf.js
配置文件
上面把三個配置文件須要實現的功能都列舉出來了,如今只要按着功能去搭建、去配置就行了,好了,開始!!
在webpack.base.conf.js
裏面開始公共配置功能
處理字體、圖片和音樂須要安裝相關依賴
npm i url-loader file-loader --save-dev
配置代碼以下
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, '../src/main.js'),
output: {
filename: 'js/[name].[hash:5].js',
path: path.resolve(__dirname, '../dist'),
publicPath: './'
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name]-[hash:5].[ext]',
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name]-[hash:5].[ext]',
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
name: 'media/[name]-[hash:5].[ext]',
}
}
]
}
]
},
}
複製代碼
url-loader
和file-loader
功能類似,都是在webpack中處理圖片、字體圖標等文件
它們之間的關係是url-loader
封裝了file-loader
,但url-loader
並不依賴於file-loader
url-loader
能夠經過limit屬性對圖片分狀況處理,當圖片小於limit(單位:byte)大小時轉base64,大於limit時調用file-loader
對圖片進行處理。
在這裏我吐一下苦水,在學習使用babel配置ES6轉換代碼的時候,真的費了很大的心思,配置了好久,不少loader我都搞不清楚是什麼關係(捂臉),後來看了官網和別人的博客才分清楚了~~~好了,開始!!
首先要安裝相關loader
npm i babel-loader @babel/core @babel/polyfill @babel/preset-env core-js@3 --save-dev
babel-loader
只支持ES6語法轉換,可是不支持ES6新增長的APIbabel-polyfill
能夠添加ES6新增長API,讓客戶端支持babel-preset-env
能夠配置讓JS兼容的運行環境babel-core
把js 代碼分析成 ast ,方便各個插件分析語法進行相應的處理看配置代碼
這樣子配置只支持ES6語法轉換,不支持ES6新增長API
在入口文件main.js
裏面添加import @babel/polyfill
這樣子就可使用ES6新增長的API了,可是這是你會發現打包後的JS文件比較大,並且裏面有不少ES6的API也是你沒用到的,因此這時候你須要作到按需引入
在根目錄下建立babel.config.js
文件,在裏面設置配置
好了,這樣就能夠實現按需引入了,能夠大大減小打包後的JS文件大小了,嗯嗯,我也終於把知識點整理出來了(捂臉)(辛酸臉)~~~
首先先安裝依賴
npm i vue vue-loader vue-template-compiler --save-dev
在src
文件夾上新建Vue文件App.vue
在main.js
入口文件上引入Vue而且掛載到節點上
好了,開始打包Vue文件的配置
這樣就行了,感受打包Vue以及掛載節點這段代碼手敲出來仍是挺有感受的
安裝依賴
npm i html-webpack-plugin --save-dev
使用 html-webpack-plugin來建立html頁面,並自動引入打包生成的文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'../index.html'),
filename: 'index.html'
}),
]
複製代碼
具體配置能夠查看npm文檔
配置alias方便路徑的檢索效率以及配置文件默認擴展名
resolve: {
extensions: ['.js','.json','.vue'],
alias: {
'@': path.resolve(__dirname,'../src')
}
}
複製代碼
"@":"指向src文件夾"
好了,到這裏爲止,已經完成了配置文件的公共部分了,接下來開始針對環境進行配置了!!!
在命令行上運行npm run test
,能夠運行公共配置文件
好了,直接開敲!!!
在webpack.prod.conf.js
文件裏面進行配置
webpack裏面提供了DefinePlugin
插件能夠方便定義環境變量
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
],
複製代碼
生產環境處理css和less文件須要把css樣式提取出來到一個獨立的css文件裏面
而且自動添加前綴,sourceMap
處理css和less文件
npm i css-loader less less-loader --save-dev
自動添加前綴
npm i postcss-loader autoprefixer --save-dev
提取css樣式到獨立css文件
npm i mini-css-extract-plugin --save-dev
篇幅過長,沒法截圖,直接上代碼
const webpackConfig = require('./webpack.base.conf');
const merge = require('webpack-merge');
const webpack = require('webpack');
//抽離CSS樣式
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(webpackConfig,{
mode: 'production',
devtool: 'cheap-source-map',
module: {
rules: [
{
test: /\.(c|le)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader=>[
require('autoprefixer')({
browsers: [
"last 2 versions",
"> 1%"
]
})
]
}
},
{
loader: 'less-loader'
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name]-[hash:5].css',
chunkFilename: 'css/[id]-[hash:5].css',
}),
],
}
複製代碼
打包過程當中你會發現每次打包後dist文件夾都會不斷增長文件, 顯然這個方面咱們須要處理
安裝相關依賴
npm i clean-webpack-plugin --save-dev
//清理dist
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(),
],
複製代碼
壓縮css代碼
npm i optimize-css-assets-webpack-plugin --save-dev
壓縮js代碼
npm i terser-webpack-plugin --save-dev
使用方式
optimization: {
minimizer: [
//壓縮css
new OptimizeCssAssetsWebpackPlugin({}),
// 壓縮JS
new TerserWebpackPlugin({
cache: true,
parallel: true,
sourceMap: true,
}),
//具體更多配置能夠查看官網
]
}
複製代碼
在命令行上運行npm run build
能夠運行開發環境配置文件
好了,說完開發環境的配置,接下來到生產環境的配置了
在webpack.dev.conf.js
文件裏面進行配置
有點小累(捂臉)
跟生產環境同樣,首先也是要定義環境變量
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
複製代碼
開發環境下的css和less不須要提取樣式,只須要添加前綴和sourceMap方便調試
安裝依賴
處理css和less文件
npm i style-loader css-loader less less-loader --save-dev
自動添加前綴
npm i postcss-loader autoprefixer --save-dev
const webpackConfig = require('./webpack.base.conf.js');
const merge = require('webpack-merge');
const path = require('path');
const webpack = require('webpack');
module.exports = merge(webpackConfig,{
mode: 'development',
// source-map,將編譯後的代碼映射到原代碼,便於報錯後定位錯誤
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(c|le)ss$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader=>[
require('autoprefixer')({
browsers: [
"last 2 versions",
"> 1%"
]
})
]
}
},
{
loader: 'less-loader',
options: {
sourceMap: true
}
}
]
}
]
},
}
複製代碼
webpack上能夠開啓熱更新模式,大大加速開大效率。
安裝相關依賴
npm i webpack-dev-server --save-dev
上代碼
//具體更多配置能夠參考官網
devServer: {
contentBase: path.resolve(__dirname,'../dist'),
// hot: true,
port: 9090,
overlay: {
warnings: true,
errors: true
},
publicPath: '/'
}
plugins: [
// 啓用模塊熱替換(HMR)
new webpack.HotModuleReplacementPlugin(),
// 當開啓 HMR 的時候使用該插件會顯示模塊的相對路徑,建議用於開發環境。
new webpack.NamedModulesPlugin(),
],
複製代碼
這樣子就能夠在線調試,無需手動刷新了!!嘻嘻
好了,開發環境的配置也完成了
在命令行上輸入npm run dev
能夠運行生產環境配置文件
整個Vue開發環境配置下來,感受學到的東西仍是挺多的,對webpack4功能的配置也有了大體的認識
雖然跟Vue-cli相比仍是差太遠,可是有時候弄點小東西折騰一下感受仍是不錯的!!
好了,本編文章就到此爲止,因爲本人水平有限,若是有什麼錯誤,請及時指出,彼此好好進步,哈哈!!謝謝各位大佬(笑臉)
下篇文章我將用此次搭建的Vue開發環境去編寫todoList項目
我相信你們對todoList並不陌生,可是同一個項目能夠有不一樣的寫法的,因此下篇文章我也會繼續手動搭建Vue文件夾,純手寫,用vue-router
. vuex
來實現,相信會對你們有幫助,好了,結束!!
github源碼:本篇教程源碼
下篇文章手動搭建Vue項目,未完待續~~~