入職第三天：vue-loader在項目中是如何配置的

時間  2019-12-04
標籤 第三天 vue loader 項目 如何 配置 简体版
原文   原文鏈接

什麼是vue-loader

這是我入職第三天的故事，在寫這篇文章以前，先來看看我們今天要講的主角——vue-loader，你對它瞭解多少？css

這是我今天的回答，確實，vue-loader是webpack的一個loader，用於處理.vue文件。 .vue 文件是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。每一個 .vue 文件包含三種類型的頂級語言塊 <template>、<script>和 <style>。vue

vue-loader 會解析文件，提取每一個語言塊，若有必要會經過其它 loader 處理（好比<script>默認用babel-loader處理，<style>默認用style-loader處理），最後將他們組裝成一個 CommonJS 模塊，module.exports 出一個 Vue.js 組件對象。node

vue-loader 支持使用非默認語言，好比 CSS 預處理器，預編譯的 HTML 模版語言，經過設置語言塊的 lang 屬性。例如，你能夠像下面這樣使用 Sass 語法編寫樣式：webpack

<style lang="sass">
  /* write Sass! */
</style>
複製代碼

知道了什麼是vue-loader以後，咱們先來建立項目。爲了快速地聊聊vue-loader，我在這裏推薦用腳手架工具 @vue/cli 來建立一個使用 vue-loader 的項目：git

npm install -g @vue/cli
vue create hello-world
cd hello-world
npm run serve
複製代碼

這個過程我能夠等等大家，because this might take a while...es6

當你在瀏覽器裏輸入localhost:8080以後，瀏覽器會友善地渲染出一個Welcome to Your Vue.js App的歡迎頁面。github

緊接着，咱們須要打開你擅長的編輯器，這裏我選用的是VSCode，順手將項目導入進來，你會看到最原始的一個項目工程目錄，裏面只有一些簡單的項目構成，尚未vue-loader的配置文件：web

首先，咱們須要在項目根目錄下面新建一個webpack.config.js文件，而後開始咱們今天的主題。npm

手動配置css到單獨文件

說到提取css文件，咱們應該先去terminal終端去安裝一下相關的npm包：json

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文件裏面，並與大多數預處理器同樣開箱即用。

注意這只是提取 *.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 文件。

如何構建生產環境

生產環境打包，目的只有兩個：1.壓縮應用代碼；2.去除Vue.js中的警告。

下面的配置僅供參考：

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

固然，若是咱們不想在開發過程當中使用這些配置，有兩種方法能夠解決這個問題：

1.使用環境變量動態構建；

例如：const isDev = process.env.NODE_ENV==='development'

或者：const isProd = process.env.NODE_ENV === 'production'

2.使用兩個分開的 webpack 配置文件，一個用於開發環境，一個用於生產環境。把可能共用的配置放到第三個文件中。

借鑑大牛的經驗

這裏提供一個網上標準的寫法，名字叫作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()
      ]
}

複製代碼

而後看看用於開發環境的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 複製代碼

最後來看看開發環境中的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 文件會在開發期間每次保存時自動檢驗。

關於更多eslint的介紹，你能夠翻看我以前寫的文章《我是如何在公司項目中使用ESLint來提高代碼質量的》，這篇文章裏面有更多的應用小技巧。

文章預告：下一篇文章我將淺談下css-modules的配置以及.editorconfig。最新文章都會第一時間更新在個人公衆號<閏土大叔>裏面，歡迎關注~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程