vue之loader处理静态资源
webpack 是利用loader 来处理各种资源的，wepback的配置基本上就是为各种资源文件，指定不同类型的loader。
1，处理css
最基本的css 处理loader 是css-loader , style-loader. css-loader 处理的是css 中的@import 和url, 根据路径(相对路径)找到相应的资源，但它不处理具体的资源，比如，img, 是由file-loader或url-loader 来处理的，这个以后再说. style-loader则是把打包后的css文件插入到html中，具体的方法是，它会生成一个内联的style 标签，然后把css注入到这个style标签中，它实现了模块热更新，修改css样式的时候，页面不会强制刷新，就能看到变化。那就npm install css-loader style-loader --save-dev 安装它们。 安装完成后，在webpack中进行配置。配置文件中有一个module属性，module 属性下面有一个rules 属性，它是一个数组，loaders 的配置写在它的里面，每一个配置项都是一个对象，指明要处理哪种文件，使用哪一种loader, 最简单的配置如下
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/, // 正则表达式，指明要处理的文件类型
use: ['style-loader', 'css-loader'] // 处理资源所使用的loader, 要注意loader的顺序，从右向左执行
}
]
},
devServer: {
contentBase:'build',
proxy: {
'/api': 'http://102.03.34.58/api'
},
port: 9000, // 设置端口号
stats: 'errors-only', // 只有产生错误的时候，才显示错误信息，日志的输出等级是error.
overlay: true // 当有编译错误的时候，在浏览器页面上显示。
},
plugins: [
new htmlWebpackPlugin()
]
}
写一点css样式，看配置有没有生效，在src 目录下，新建一个css文件夹，里面写一个style.css文件，随便写一点样式，
body {
background: blue;
}
然后在index.js 中引入import ‘./css/style.css’.
// 引入css 样式 import './css/style.scss'; import component from './component'; document.body.appendChild(component())
npm run dev 启动服务器，可以看到页面有了背景色，这时我们可以随便更改body的背景色，页面也会时时做出了变化，非常方便开发。
当然，你可能使用css 预处理器， less, sass stylus等， 这也简单，安装相应的loader 就可以了，
less: npm install less less-loader --save-dev,
sass： npm install node-sass, sass-loader --save -dev,
stylus, npm install stylus, stylus-loader --save-dev,
然后在use中增加一条相应的loader
rules: [
{
test: /\.css$/, // 正则表达式，指明要处理的文件类型
use: ['style-loader', 'css-loader'] // 处理资源所使用的loader, 要注意loader的顺序，从右向左执行
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.styl$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
}
]
最后再来说一下PostCSS, 它的配置稍微麻烦一点，因为PostCSS是由插件来起作用的，使用哪个功能，就要安装哪个插件，如果只安装postcss-loader, 它并不起作用，这和babel-loader一样， 比如要使用添加浏览器厂商前缀的功能, 在安装postcss, postcss-loader 后，还要安装对应的插件autoprefixer , npm install postcss, postcss-loader, autoprefixer --save-dev. 安装完成后，就要进行配置。对于纯css 来说，我们最先使用postcss-loader, 所以postcss-loader要放到最右边，但是又不能只写一个postcss-loader 放在那里，因为它自己不起作用，需要对postcss-loader进行配置。配置的方式有两种，一种是在webpack的配置文件中，一个是单独给postcss写一个配置文件。
如果在wepback的配置文件中配置postcss-loader，那postcss-loader 就不能是一个字符串了，要是一个对象， loader属性 是我们指定的loader, options 就是我们指定的配置项，对于postcss-loader 来说，它的配置项是plugins, 使用到的插件， 是一个函数，返回一个数组，数组中就包括用到的插件。
{
test: /\.css$/,
use: ['style-loader', 'css-loader',
{ // 使用对象对postcss-loader进行配置，对象有两个属性loader, options
// loader属性就是指定使用的loader, options 就是该loader的配置项，也是一个对象
loader: 'postcss-loader',
options: {
plugins: () => ([
require('autoprefixer')()
])
}
}
]
}
但是当我们使用很多插件进行开发，这样在配置文件中进行配置就很麻烦了，也会导致配置文件比较庞大，这时就要使用PostCSS配置文件，它的配置文件有很多格式，json, yml, js的都可以，有兴趣的可以看一下官方文档。我在这里就使用postcss.config.js. 在项目根目录下建立一个postcss.config.js 文件，它的格式如下，module-export 出一个带有plugins属性的对象。plugins属性也是一个对象，属性名就是使用的插件的名称，属性值是一个对象，对这个插件的配置。
module.exports = {
plugins: {
"autoprefixer": {
browsers: [
// 加这个后可以出现额外的兼容性前缀
"> 0.01%"
]
}
}
}
使用配置文件后，webpack的配置文件还原到以前的状态，
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
现在在style.css中给body, 添加box-sizing: border-box; 看一下效果。
body {
background: blue;
box-sizing: border-box;
}
打开浏览器控制台，可以看到添加了webkit- 的浏览器厂商前缀。
当使用css 预处理的时候，它要放到预处理器loader 的后面, 也就是说，先使用预处理器loader, 再使用postcss-loader. 当然配置还是一样的。以scss 为例
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}
但是这里会存在一个问题，就是当样式文件中，有@import 的时候，你会发现postcss-loader 并没有起对import 进来的文件起作用，这时在css 文件夹中，再建一个文件夹，box.css
div {
display: flex;
width: 200px;
height: 200px;
border: 1px solid blue;
}
然后在style.css 里面@import 引入box.css;
/* @import 语句结尾要加分号 */
@import url(box.css);
body {
box-sizing: border-box;
}
打开浏览器控制台，找到div.css的样式，你会发现display:flex 并没有加前缀。
这时要给css-loader 设置一个属性，importLoaders, 它的值为一个数字，表示css-loader 前面有几个loader 要处理，对于纯css来说，它前面有一个loader, postcss-loader, 所以importLoaders 的取值为1.
{
test: /\.css$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader']
}
但是对于css预处理器来说，css-laoder 前面有个loader, postcss-loader 和预处理器loader,所以importLoaders的取值为2.
{
test: /\.scss$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
importLoaders: 2
}
}, 'postcss-loader', 'sass-loader']
}
2，处理图片
处理图片主要用到两个loader: url-loader style-loader. url-loader的作用是把图片转化成base64编码的字符串，然后内嵌到到js文件中。 file-loader 则是把图片打包成一个个单独的图片文件，并返回它们的路径。但是这里有一个问题，我想把小的图片内嵌到js中， 大的图片打包成一个个单独的文件，怎么办？这时需要对url-loader进行配置，它有一个limit属性，取值为多少k， 表示的意思时，当小于limit时，直接把图片打包到js中，当大于limit时，就使用file-loader 打包成一个单独的文件，当然我们也可以给打包成的图片起一个名字，那就要配置name属性，当使用file-loader 生成图片的时候，它会生成一个MD5 的hash值，我们可以利用这个hash值给文件命名，name: “[name].[hash].[ext]”， name： 要打包的图片以前的文件名，hash file-loader 生成的hash值，ext, 打包后的图片以前的后缀名。当然，我们想把图片统一打包到一个文件夹中。可以name 放一个文件夹名 ‘img/[name].[hash].[ext]’
{
test: /\.(jpg|png|svg)$/,
use: {
loader: 'url-loader',
options: {
limit: 2000,
name: '/images/[name].[hash].[ext]'
}
}
}
3，处理字体
Fonts 的处理方式和image的处理方式一致，也是url-loader, file-loader,
{
test: /\.(ttf|eot|woff|woff2)$/,
use: {
loader: "url-loader",
options: {
limit: 50000,
mimetype: "application/font-woff",
name: "./fonts/[name].[ext]"
}
}
}
4, 处理js
js的处理用到的loader 是babel-loader，babel-loader 要依赖@babel/core, 现在babel升级到7了，以前的babel-core 要改成@babel/core, 感觉babel 7 是把babel 所有功能都放到了@babel的命名空间下，所有的presets 和plugins 都以@babel 开始，然后是/， 最后才是相应的preset或plugin. 先安装上babel-loader @babel/core再说, npm install babel-loader @babel/core --save-dev 然后在webpack的配置文件中配置一下，
{
test: /\.js$/,
loader: 'babel-loader'
}
这时执行一下npm run build, 你会发现有两个问题，一是打包非常慢，因为 webpack 进行打包的时候，会把所有的js代码都会打包一下，包括node_modules 下面的代码，但是node_modules下面的代码根本就没有必要进行打包，所以要排除掉, 要用到 exclude 配置项，我觉得使用include 更好，include是表示要打包的代码，我们书写的代码在src下面，所以include 配置成src 目录就可以了。
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: path.join(__dirname, 'node_modules'),
}
二是打包后的代码和以前的代码并没有多少不同？这是因为@babel/core 本身不起作用，而是要依赖插件，一个一个插件写起来太麻烦，所以babel 提供了插件的集合preset, 安装
