wepback基础配置(构建一个vue-cli)--2

管理非js依赖

webpack对于非js资源的加载，通过配置项module实现。
比如：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};
复制代码

指定了当加载了一个.css模块时，使用style-loader或者css-loader对其进行解析。
当然这些loader是需要进行安装才可以使用的，npm install --save-dev style-loader css-loader。

vue单文件组件

在上一章我们提到了.vue单文件组件的一个优点：将模板编译成render函数，当然，优点不止这一个：单文件组件的优势。
所以我们准备使用单文件组件进行开发，那么问题来了，怎么加载.vue模块？
前面提到了，对于非js资源我们需要使用配置module来指定怎么加载，也就是指定某个loder。
对于.vue文件，vue官网有官方的加载器vue-loader。
首先进行安装：

npm install --save-dev vue-loader

复制代码

安装完成后提示我们 vue-loader@14.1.1 requires a peer of vue-template-compiler@^2.0.0 but none was installed.

npm install --save-dev vue-template-compiler

复制代码

OK！

我们先不使用loader加载一下.vue文件：
增加App.vue组件

webpack-demo
  |- package.json
  |- webpack.config.js
  |- index.html
  |- /src
    |- app.js
+   |- App.vue
复制代码

修改app.js：

import Vue from 'vue';
import App from './App.vue';

Vue.config.devtools = true;
Vue.config.performance = true;
Vue.config.productionTip = false;

// const app = {
  // template: '<h1>HELLO,PADAKER</h1>'
//   render(h) {
//     return h('h1', 'HELLO,PADAKER');
//   }
// }

new Vue({
  el: '#app',
  render(h) {
    return h('app');
  },
  // template: '<app />',
  components: {
    // app
    App
  }
});
复制代码

App.vue：

<template>
  <h1>HELLO,PADAKER</h1>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>
复制代码

执行npm run build：

ERROR in ./src/App.vue Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

讲得很清楚了，你需要合适的加载器处理这类文件，接下来我们配置webpack：

module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
复制代码

再执行npm run build，ok，没报错，打开index.html，发现成功渲染，也没有报runtime-only build的错。

vue-loader配置项

将.vue解析打包也不是一件简单的事情。首先.vue文件需要处理template，script，style三个部分，这三个部分如何处理、需不需要加载器、预处理？这些都可以通过配置来自定义。

1. 首先我们来看看template：

• vue-loader将template的内容直接处理为字符串，然后编译成render函数，这也就是为什么需要先安装vue-template-compiler的原因。
• preserveWhitespace去除标签之间的空格（去除inline元素之间的间隙）

2. style：

• 通过loaders选项，可以覆盖style里的内容的默认加载器：

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          css: 'css-style'
        }
      }
    }
  ]
}
复制代码

vue-loader默认将样式解析出来后，通过style标签的形式加载在html上，这样做可以减少请求的次数，但是也增加了.html文件的体积。有些情况下我们希望能将.vue文件的style解析出来的css单独存放到一个.css文件中，以便能够被浏览器单独缓存。所以需要以下设置：

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader'
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
  ]
};
复制代码

并在html文件中引入：

<link rel="stylesheet" href="style.css">
复制代码

• cssSourceMap： 当开启该选项时，在devtool里能准确的跟踪到样式所在文件的行数。默认开启，但是只有在webpack的devtool配置项不为false时生效。

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // ...
          cssSourceMap: true
        }
      }
    ]
  },
  devtool: '#source-map'
};

复制代码

3. script：  

• 使用eslint进行代码检验
  首先安装eslint、eslint-loader；

npm install --save-dev eslint eslint-loader
复制代码

然后设置webpack配置项。

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // only lint local *.vue files
+     {
+       enforce: 'pre',
+       test: /\.(js|vue)$/,
+       loader: 'eslint-loader',
+       exclude: /node_modules/
+     },
      // but use vue-loader for all *.vue files
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}
复制代码

为了检测.vue文件，还需要使用到eslint-plugin-vue，同样先安装：

npm install --save-dev eslint-plugin-vue
复制代码

在根目录新建.eslintrc.js文件：

module.exports = {
    "root": true,
-   "parser": 'babel-eslint',
    "parserOptions": {
+     "parser": 'babel-eslint',
      "sourceType": 'module'
    },
    env: {
      "browser": true,
    },
    extends: [
      "standard",
+     "plugin:vue/essential"
    ]
};
复制代码

在继承的语法规则里面，我们使用的是standard规则集，为了使用standard共享设置，还需安装：

npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
复制代码

现在，当我们再去执行npm run build构建打包时，webpack会先调用eslint检测语法错误。由于安装了eslint-plugin-vue，同时也会检测.vue文件中script的语法错误以及vue开发的一些规则。

小结：

目前我们实现了加载.vue组件，了解了如何对style块配置相应的加载器进行加载，对解析出来的的css样式如何提取成为单文件，还有对项目的eslint配置。

转载于:https://juejin.im/post/5a7973516fb9a06332298d9f