詳解vue-loader在項(xiàng)目中是如何配置的

更新時(shí)間：2018年06月04日 09:52:09 作者：閏土大叔

這篇文章主要介紹了詳解vue-loader在項(xiàng)目中是如何配置的，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

什么是vue-loader

這是我入職第三天的故事，在寫這篇文章之前，先來(lái)看看咱們今天要講的主角——vue-loader，你對(duì)它了解多少？

這是我今天的回答，確實(shí)，vue-loader是webpack的一個(gè)loader，用于處理.vue文件。

.vue 文件是一個(gè)自定義的文件類型，用類 HTML 語(yǔ)法描述一個(gè) Vue 組件。每個(gè) .vue 文件包含三種類型的頂級(jí)語(yǔ)言塊 <template>、<script>和 <style>。

vue-loader 會(huì)解析文件，提取每個(gè)語(yǔ)言塊，如有必要會(huì)通過(guò)其它 loader 處理（比如<script>默認(rèn)用babel-loader處理，<style>默認(rèn)用style-loader處理），最后將他們組裝成一個(gè) CommonJS 模塊，module.exports 出一個(gè) Vue.js 組件對(duì)象。

vue-loader 支持使用非默認(rèn)語(yǔ)言，比如 CSS 預(yù)處理器，預(yù)編譯的 HTML 模版語(yǔ)言，通過(guò)設(shè)置語(yǔ)言塊的 lang 屬性。例如，你可以像下面這樣使用 Sass 語(yǔ)法編寫樣式：

<style lang="sass">
 /* write Sass! */
</style>

知道了什么是vue-loader之后，我們先來(lái)創(chuàng)建項(xiàng)目。為了快速地聊聊vue-loader，我在這里推薦用腳手架工具 @vue/cli 來(lái)創(chuàng)建一個(gè)使用 vue-loader 的項(xiàng)目：

npm install -g @vue/cli
vue create hello-world
cd hello-world
npm run serve

這個(gè)過(guò)程我可以等等你們，because this might take a while...

當(dāng)你在瀏覽器里輸入localhost:8080之后，瀏覽器會(huì)友善地渲染出一個(gè)Welcome to Your Vue.js App的歡迎頁(yè)面。

緊接著，我們需要打開你擅長(zhǎng)的編輯器，這里我選用的是VSCode，順手將項(xiàng)目導(dǎo)入進(jìn)來(lái)，你會(huì)看到最原始的一個(gè)項(xiàng)目工程目錄，里面只有一些簡(jiǎn)單的項(xiàng)目構(gòu)成，還沒(méi)有vue-loader的配置文件：

首先，我們需要在項(xiàng)目根目錄下面新建一個(gè)webpack.config.js文件，然后開始我們今天的主題。

手動(dòng)配置css到單獨(dú)文件

說(shuō)到提取css文件，我們應(yīng)該先去terminal終端去安裝一下相關(guān)的npm包：

npm install extract-text-webpack-plugin --save-dev

先來(lái)說(shuō)個(gè)簡(jiǎn)答的方法，上代碼：

// 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")
 ]
}

上述內(nèi)容將自動(dòng)處理 *.vue 文件內(nèi)的 <style> 提取到style.css文件里面，并與大多數(shù)預(yù)處理器一樣開箱即用。

注意這只是提取 *.vue 文件 - 但在 JavaScript 中導(dǎo)入的 CSS 仍然需要單獨(dú)配置。

接下來(lái)我們?cè)倏纯慈绾问謩?dòng)配置：

// 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 提取到了單個(gè)的 CSS 文件。

如何構(gòu)建生產(chǎn)環(huán)境

生產(chǎn)環(huán)境打包，目的只有兩個(gè)：1.壓縮應(yīng)用代碼；2.去除Vue.js中的警告。

下面的配置僅供參考：

// webpack.config.js
module.exports = {
 // ... other options
 plugins: [
  new webpack.DefinePlugin({
   'process.env': {
    NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin()
 ]
}

當(dāng)然，如果我們不想在開發(fā)過(guò)程中使用這些配置，有兩種方法可以解決這個(gè)問(wèn)題：

1.使用環(huán)境變量動(dòng)態(tài)構(gòu)建；

例如：const isDev = process.env.NODE_ENV==='development'
或者：const isProd = process.env.NODE_ENV === 'production'

2.使用兩個(gè)分開的 webpack 配置文件，一個(gè)用于開發(fā)環(huán)境，一個(gè)用于生產(chǎn)環(huán)境。把可能共用的配置放到第三個(gè)文件中。

借鑒大牛的經(jīng)驗(yàn)

這里提供一個(gè)網(wǎng)上標(biāo)準(zhǔ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

最后來(lái)看看開發(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()
 ]
})

如何進(jìn)行代碼檢驗(yàn)

你可能有疑問(wèn)，在 .vue 文件中你怎么檢驗(yàn)?zāi)愕拇a，因?yàn)樗皇?JavaScript。我們假設(shè)你使用 ESLint (如果你沒(méi)有使用話，你應(yīng)該去使用！)。

首先你要去安裝eslint-loader:

npm install eslint eslint-loader --save-dev

然后將它應(yīng)用在pre-loader上：

// webpack.config.js
module.exports = {
 // ... other options
 module: {
  rules: [
   {
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/
   }
  ]
 }
}

這樣你的 .vue 文件會(huì)在開發(fā)期間每次保存時(shí)自動(dòng)檢驗(yàn)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: