詳解vue-loader在項目中是如何配置的
什么是vue-loader
這是我入職第三天的故事，在寫這篇文章之前，先來看看咱們今天要講的主角——vue-loader，你對它了解多少？
這是我今天的回答，確實，vue-loader是webpack的一個loader，用于處理.vue文件。
.vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每個 .vue 文件包含三種類型的頂級語言塊 <template>、<script>和 <style>。
vue-loader 會解析文件，提取每個語言塊，如有必要會通過其它 loader 處理（比如<script>默認用babel-loader處理，<style>默認用style-loader處理），最后將他們組裝成一個 CommonJS 模塊，module.exports 出一個 Vue.js 組件對象。
vue-loader 支持使用非默認語言，比如 CSS 預處理器，預編譯的 HTML 模版語言，通過設置語言塊的 lang 屬性。例如，你可以像下面這樣使用 Sass 語法編寫樣式：
<style lang="sass"> /* write Sass! */ </style>
知道了什么是vue-loader之后，我們先來創(chuàng)建項目。為了快速地聊聊vue-loader，我在這里推薦用腳手架工具 @vue/cli 來創(chuàng)建一個使用 vue-loader 的項目：
npm install -g @vue/cli vue create hello-world cd hello-world npm run serve
這個過程我可以等等你們，because this might take a while...
當你在瀏覽器里輸入localhost:8080之后，瀏覽器會友善地渲染出一個Welcome to Your Vue.js App的歡迎頁面。
緊接著，我們需要打開你擅長的編輯器，這里我選用的是VSCode，順手將項目導入進來，你會看到最原始的一個項目工程目錄，里面只有一些簡單的項目構成，還沒有vue-loader的配置文件：
首先，我們需要在項目根目錄下面新建一個webpack.config.js文件，然后開始我們今天的主題。
手動配置css到單獨文件
說到提取css文件，我們應該先去terminal終端去安裝一下相關的npm包：
npm install extract-text-webpack-plugin --save-dev
先來說個簡答的方法，上代碼：
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// other options...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
extractCSS: true
}
}
]
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
上述內容將自動處理 *.vue 文件內的 <style> 提取到style.css文件里面，并與大多數(shù)預處理器一樣開箱即用。
注意這只是提取 *.vue 文件 - 但在 JavaScript 中導入的 CSS 仍然需要單獨配置。
接下來我們再看看如何手動配置：
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// other options...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader' // 這是vue-loader的依賴
})
}
}
}
]
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
此舉便將所有 Vue 組件中的所有已處理的 CSS 提取到了單個的 CSS 文件。
如何構建生產環(huán)境
生產環(huán)境打包，目的只有兩個：1.壓縮應用代碼；2.去除Vue.js中的警告。
下面的配置僅供參考：
// webpack.config.js
module.exports = {
// ... other options
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin()
]
}
當然，如果我們不想在開發(fā)過程中使用這些配置，有兩種方法可以解決這個問題：
1.使用環(huán)境變量動態(tài)構建；
例如：const isDev = process.env.NODE_ENV==='development'
或者：const isProd = process.env.NODE_ENV === 'production'
2.使用兩個分開的 webpack 配置文件，一個用于開發(fā)環(huán)境，一個用于生產環(huán)境。把可能共用的配置放到第三個文件中。
借鑒大牛的經驗
這里提供一個網上標準的寫法，名字叫做vue-hackernews-2.0，這里是傳送門：https://github.com/vuejs/vue-hackernews-2.0
其中共用的配置文件webpack.base.config.js的代碼如下：
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
devtool: isProd
? false
: '#cheap-module-source-map',
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '/dist/',
filename: '[name].[chunkhash].js'
},
resolve: {
alias: {
'public': path.resolve(__dirname, '../public')
}
},
module: {
noParse: /es6-promise\.js$/, // avoid webpack shimming process
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[ext]?[hash]'
}
},
{
test: /\.styl(us)?$/,
use: isProd
? ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: { minimize: true }
},
'stylus-loader'
],
fallback: 'vue-style-loader'
})
: ['vue-style-loader', 'css-loader', 'stylus-loader']
},
]
},
performance: {
maxEntrypointSize: 300000,
hints: isProd ? 'warning' : false
},
plugins: isProd
? [
new VueLoaderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new ExtractTextPlugin({
filename: 'common.[chunkhash].css'
})
]
: [
new VueLoaderPlugin(),
new FriendlyErrorsPlugin()
]
}
然后看看用于開發(fā)環(huán)境的webpack.client.config.js的配置是如何寫的：
const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const SWPrecachePlugin = require('sw-precache-webpack-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const config = merge(base, {
entry: {
app: './src/entry-client.js'
},
resolve: {
alias: {
'create-api': './create-api-client.js'
}
},
plugins: [
// strip dev-only code in Vue source
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"client"'
}),
// extract vendor chunks for better caching
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// a module is extracted into the vendor chunk if...
return (
// it's inside node_modules
/node_modules/.test(module.context) &&
// and not a CSS file (due to extract-text-webpack-plugin limitation)
!/\.css$/.test(module.request)
)
}
}),
// extract webpack runtime & manifest to avoid vendor chunk hash changing
// on every build.
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
new VueSSRClientPlugin()
]
})
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
// auto generate service worker
new SWPrecachePlugin({
cacheId: 'vue-hn',
filename: 'service-worker.js',
minify: true,
dontCacheBustUrlsMatching: /./,
staticFileGlobsIgnorePatterns: [/\.map$/, /\.json$/],
runtimeCaching: [
{
urlPattern: '/',
handler: 'networkFirst'
},
{
urlPattern: /\/(top|new|show|ask|jobs)/,
handler: 'networkFirst'
},
{
urlPattern: '/item/:id',
handler: 'networkFirst'
},
{
urlPattern: '/user/:id',
handler: 'networkFirst'
}
]
})
)
}
module.exports = config
最后來看看開發(fā)環(huán)境中的webpack.server.config.js的配置是怎么寫的：
const webpack = require('webpack')
const merge = require('webpack-merge')
const base = require('./webpack.base.config')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = merge(base, {
target: 'node',
devtool: '#source-map',
entry: './src/entry-server.js',
output: {
filename: 'server-bundle.js',
libraryTarget: 'commonjs2'
},
resolve: {
alias: {
'create-api': './create-api-server.js'
}
},
// https://webpack.js.org/configuration/externals/#externals
// https://github.com/liady/webpack-node-externals
externals: nodeExternals({
// do not externalize CSS files in case we need to import it from a dep
whitelist: /\.css$/
}),
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'process.env.VUE_ENV': '"server"'
}),
new VueSSRServerPlugin()
]
})
如何進行代碼檢驗
你可能有疑問，在 .vue 文件中你怎么檢驗你的代碼，因為它不是 JavaScript。我們假設你使用 ESLint (如果你沒有使用話，你應該去使用！)。
首先你要去安裝eslint-loader:
npm install eslint eslint-loader --save-dev
然后將它應用在pre-loader上：
// webpack.config.js
module.exports = {
// ... other options
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
}
]
}
}
這樣你的 .vue 文件會在開發(fā)期間每次保存時自動檢驗。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
最近學習一下前端框架Vue,整體上感覺還是比較有意思的,但是在安裝vue-cli腳手架的時候,出現(xiàn)了一些問題,解決問題也花費了不少時間,下面這篇文章主要給大家介紹了關于解決vue終端報錯:不是內部或外部命令的相關資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vuei18n 在數(shù)組中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue.js2.0 實現(xiàn)better-scroll的滾動效果實例詳解
better-scroll 是一個移動端滾動的解決方案，它是基于 iscroll 的重寫。better-scroll 也很強大，不僅可以做普通的滾動列表，還可以做輪播圖、picker 等等，下面通過本文給大家介紹vue.js2.0 實現(xiàn)better-scroll的滾動效果，感興趣的朋友一起看看吧2018-08-08
ElementUI是Vue的UI框架,提供了豐富的組件,方便快速開發(fā)頁面,本文詳細介紹了ElementUI的安裝、使用方法以及常見組件的說明,包括基礎組件、布局組件、選擇框組件、輸入框組件、下拉框組件等,需要的朋友可以參考下2024-11-11
vue2.0實現(xiàn)的tab標簽切換效果（內容可自定義）示例
這篇文章主要介紹了vue2.0實現(xiàn)的tab標簽切換效果,結合實例形式分析了vue.js實現(xiàn)內容可自定義的tab點擊切換功能相關操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)日歷功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
隨著vue3.4版本的發(fā)布,defineModel也正式轉正了,它可以簡化父子組件之間的雙向綁定,是目前官方推薦的雙向綁定實現(xiàn)方式,下面就跟隨小編一起深入了解一下defineModel的使用吧2024-02-02
這篇文章主要介紹了淺談vant組件Picker 選擇器選單選問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue.js中的計算屬性、監(jiān)視屬性與生命周期詳解
最近在學習vue,學習中遇到了一些感覺挺重要的知識點,感覺有必要整理下來,這篇文章主要給大家介紹了關于Vue.js中計算屬性、監(jiān)視屬性與生命周期的相關資料,需要的朋友可以參考下2021-06-06
Vue實現(xiàn)登錄功能全套超詳細講解(含封裝axios)
這篇文章主要給大家介紹了關于Vue實現(xiàn)登錄功能(含封裝axios)的相關資料,Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應該要熟練的掌握它,需要的朋友可以參考下2023-10-10