這是我工作第三天的故事。在寫這篇文章之前，我們先來看看今天要說的主角——Vue-Loader。妳對它了解多少？
這是我今天的回答。的確，vue-loader是webpack的壹個加載器，用來處理。vue文件。
的。Vue文件是壹種自定義文件類型，它用類似HTML的語法描述了壹個vue組件。每個。vue文件包含三種類型的頂級語言塊
Vue-loader將解析文件，提取每個語言塊，如果需要，它將由其他加載器處理(例如
通過設置語言塊的lang屬性，Vue-loader支持使用非默認語言，如CSS預處理程序和預編譯HTML模板語言。例如，您可以使用Sass語法編寫樣式，如下所示:
& ltstyle lang="sass " >
/*寫Sass！*/
& lt/style & gt；
了解了vue-loader是什麽之後，我們先來創建壹個項目。為了快速談論vue-loader，我推薦使用腳手架工具@vue/cli創建壹個使用vue-loader的項目:
npm安裝-g @vue/cli
創建hello-world
cd妳好世界
npm運行服務
我可以在這個過程中等妳，因為這可能需要壹段時間...
當妳在瀏覽器中輸入localhost:8080，瀏覽器會友好地渲染壹個歡迎頁面歡迎妳的Vue.js App。
然後，我們需要打開妳擅長的編輯器。我這裏選擇VSCode，方便導入項目。妳會看到最原始的工程項目目錄，裏面只包含壹些簡單的工程組件，沒有vue-loader的配置文件:
首先我們需要在項目根目錄下新建壹個webpack.config.js文件，然後開始我們今天的話題。
手動將css配置到單獨的文件中
說到提取css文件，首先要去終端安裝相關的npm包:
npm安裝提取-文本-網絡包-插件-保存-開發
先說壹個簡答題方法，編碼:
//網頁包.配置. js
var extract text plugin = require(" extract-text-web pack-plugin ")
模塊.導出= {
//其他選項...
模塊:{
規則:[
{
測試:/\。vue$/，
加載器:“vue-loader”，
選項:{
extractCSS: true
}
}
]
},
插件:[
新的ExtractTextPlugin("style.css ")
]
}
上述內容將在*中自動處理。vue文件
請註意，這只是提取*。vue文件——但是JavaScript中導入的CSS還是需要單獨配置。
接下來，讓我們看看如何手動配置:
//網頁包.配置. js
var extract text plugin = require(" extract-text-web pack-plugin ")
模塊.導出= {
//其他選項...
模塊:{
規則:[
{
測試:/\。vue$/，
加載器:“vue-loader”，
選項:{
裝載機:{
CSS:extract text plugin . extract({
使用:' css-loader '，
Fallback: 'vue-style-loader' //這是vue-loader的依賴。
})
}
}
}
]
},
插件:[
新的ExtractTextPlugin("style.css ")
]
}
這將把所有Vue組件中所有處理過的CSS提取到壹個CSS文件中。
如何構建生產環境
生產環境打包只有兩個目的:1。壓縮應用程序代碼；2.刪除Vue.js中的警告
以下配置僅供參考:
//網頁包.配置. js
模塊.導出= {
// ...其他選項
插件:[
新網絡包。定義插件({
process.env ':
NODE_ENV:“生產”
}
}),
new web pack . optimize . uglifyjsplugin()
]
}
當然，如果我們不想在開發過程中使用這些配置，有兩種方法可以解決這個問題:
1.使用環境變量的動態構造；
例如，consistsdev = process . env . node _ env = = = ' development '
或者:constis prod = process . env . node _ env = = = ' production '
2.使用兩個獨立的webpack配置文件，壹個用於開發環境，另壹個用於生產環境。將可能的配置放在第三個文件中。
從丹尼爾的經歷中學習
這裏有壹個網上的標準寫法，名字叫vue-hacken news-2.0，這裏是門戶:/vue js/vue-hacken news-2.0。
* *使用的配置文件webpack.base.config.js的代碼如下:
const path = require('path ')
const webpack = require('webpack ')
const extract text plugin = require(' extract-text-web pack-plugin ')
const friendly error splugin = require(' friendly-errors-web pack-plugin ')
const { VueLoaderPlugin } = require(' vue-loader ')
const is prod = process . ENV . node _ ENV = = = ' production '
模塊.導出= {
開發工具:isProd
？錯誤的
:' #廉價模塊源映射'，
輸出:{
path: path.resolve(__dirname，'../dist ')，
public path:“/dist/”，
文件名:'[名稱]。【chunkhash】。js '
},
解決:{
別名:{
' public': path.resolve(__dirname，'../public’)
}
},
模塊:{
noParse: /es6-promise\。js$/，//避免webpack填充過程
規則:[
{
測試:/\。vue$/，
加載器:“vue-loader”，
選項:{
編譯器選項:{
preserveWhitespace: false
}
}
},
{
測試:/\。js$/，
裝載機:“巴別塔裝載機”，
排除:/node_modules/
},
{
測試:/\。(png|jpg|gif|svg)$/，
加載程序:“url加載程序”，
選項:{
限額:10000，
姓名:'[姓名]。[ext]？'散列值'
}
},
{
測試:/\。styl(美國)？$/,
用途:isProd
？ExtractTextPlugin.extract({
使用:[
{
加載程序:' css-loader '，
選項:{ minimize: true }
},
'唱針加載器'
],
回退:“vue風格加載器”
})
:['vue-style-loader '，' css-loader '，' stylus-loader']
},
]
},
性能:{
maxEntrypointSize: 300000，
提示:isProd？'警告' :假
},
插件:isProd
？[
new VueLoaderPlugin()，
new web pack . optimize . uglifyjsplugin({
壓縮:{警告:false }
}),
新的web pack . optimize . moduleconcatenationplugin()，
新的ExtractTextPlugin({
文件名:'通用。【chunkhash】。' css '
})
]
: [
new VueLoaderPlugin()，
新的FriendlyErrorsPlugin()
]
}
然後看看開發環境的webpack.client.config.js的配置是怎麽寫的:
const webpack = require('webpack ')
const merge = require(' web pack-merge ')
const base = require('。/web pack . base . config’)
const SWPrecachePlugin = require(' SW-precache-web pack-plugin ')
const VueSSRClientPlugin = require(' vue-服務器-渲染器/客戶端-插件')
const config = merge(base，{
條目:{
應用程序:'。/src/entry-client.js '
},
解決:{
別名:{
創建-api“:”。/create-api-client.js '
}
},
插件:[
//剝離Vue源代碼中的開發專用代碼
新網絡包。定義插件({
' process . ENV . node _ ENV ':JSON . stringify(process . ENV . node _ ENV | | ' development ')，
process . ENV . vue _ ENV ':" " client "
}),
//提取供應商區塊以實現更好的緩存
新的web pack . optimize . commonschunkplugin({
名稱:'供應商'，
minChunks:函數(模塊){
//如果滿足以下條件，模塊將被提取到供應商區塊中...
返回(
//它在node_modules內部
/node_modules/。test(module.context)& amp
//而不是CSS文件(由於extract-text-webpack-plugin的限制)
！/\.css$/。測試(模塊.請求)
)
}
}),
//提取webpack運行時& amp避免供應商區塊哈希更改的清單
//在每次生成時。
新的web pack . optimize . commonschunkplugin({
名稱:“清單”
}),
新VueSSRClientPlugin()
]
})
if(process . ENV . node _ ENV = = = ' production '){
plugins.push(
//自動生成服務工作進程
新的SWPrecachePlugin({
cacheId: 'vue-hn '，
文件名:' service-worker.js '，
沒錯，
dontCacheBustUrlsMatching: /。/,
staticFileGlobsIgnorePatterns:[/\。映射$/，/\。json$/]，
runtimeCaching: [
{
URL pattern:“/”，
處理程序:“網絡優先”
},
{
URL pattern:/\/(top | new | show | ask | jobs)/，
處理程序:“網絡優先”
},
{
URL pattern:“/item/:id”，
處理程序:“網絡優先”
},
{
URL pattern:“/user/:id”，
處理程序:“網絡優先”
}
]
})
)
}
模塊.導出=配置
最後，我們來看看開發環境中webpack.server.config.js的配置是怎麽寫的:
const webpack = require('webpack ')
const merge = require(' web pack-merge ')
const base = require('。/web pack . base . config’)
const node externals = require(' web pack-node-externals ')
const VueSSRServerPlugin = require(' vue-server-renderer/server-plugin ')
module.exports = merge(base，{
目標:“節點”，
dev tool:“# source-map”，
條目:'。/src/entry-server.js '，
輸出:{
文件名:“server-bundle.js”，
庫目標:“commonjs2”
},
解決:{
別名:{
創建-api“:”。/create-api-server.js '
}
},
///liady/web pack-node-externals
外部:節點外部({
//不要將CSS文件外部化，以防我們需要從dep導入它
白名單:/\。css$/
}),
插件:[
新網絡包。定義插件({
' process . ENV . node _ ENV ':JSON . stringify(process . ENV . node _ ENV | | ' development ')，
process.env.VUE_ENV ':" "服務器"
}),
新VueSSRServerPlugin()
]
})
如何檢查代碼
您可能想知道如何在？vue文件，因為它不是JavaScript。我們假設妳使用ESLint(如果妳沒有，妳應該！)。
首先，妳必須安裝eslint-loader:
npm安裝eslint eslint-loader - save-dev
然後將其應用於預加載程序:
//網頁包.配置. js
模塊.導出= {
// ...其他選項
模塊:{
規則:[
{
強制:“前”，
測試:/\。(js|vue)$/，
加載程序:' eslint-loader '，
排除:/node_modules/
}
]
}
}
這邊，妳的。vue文件在開發過程中每次保存時都會被自動檢查。