欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解vue-loader在项目中是如何配置的

程序员文章站 2023-11-16 11:55:04
什么是vue-loader 这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少? 这是我今天的回答,确实,...

什么是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之后,我们先来创建项目。为了快速地聊聊vue-loader,我在这里推荐用脚手架工具 @vue/cli 来创建一个使用 vue-loader 的项目:

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

这个过程我可以等等你们,because this might take a while...

详解vue-loader在项目中是如何配置的

当你在浏览器里输入localhost:8080之后,浏览器会友善地渲染出一个welcome to your vue.js app的欢迎页面。

紧接着,我们需要打开你擅长的编辑器,这里我选用的是vscode,顺手将项目导入进来,你会看到最原始的一个项目工程目录,里面只有一些简单的项目构成,还没有vue-loader的配置文件:

详解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文件里面,并与大多数预处理器一样开箱即用。

注意这只是提取 *.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,这里是传送门:

其*用的配置文件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 文件会在开发期间每次保存时自动检验。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。