管理非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三个部分，这三个部分如何处理、需不需要加载器、预处理？这些都可以通过配置来自定义。
- 首先我们来看看
template：
vue-loader将template的内容直接处理为字符串，然后编译成render函数，这也就是为什么需要先安装vue-template-compiler的原因。preserveWhitespace去除标签之间的空格（去除inline元素之间的间隙）
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'
};
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配置。
