webpack进阶--loader

webpack的核心就是它的配置文件，只要配置好配置文件webpack就可以用得利索～～

而配置文件主要就是7个部分entry、output、plugins、resolve、devserver（webpack3.6热更新）、devtool(调试工具)、我们今天要讲的module:rules(或者loaders)

我们今天要讲的loader也是在webpack.config.js里面配置的：

//webpack.config.js
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/app.js',
output:{
path: path.resolve(__dirname,'./dist'),
filename: '[name].bundle.js'
},
resolve: {
extensions: ['', '.js', '.vue'] //这里是import的时候不带后缀，webpack帮我们自动查看的后缀列表
},
plugins:[
new htmlPlugin({
template : './index.html',
filename: 'index.html'
})
],
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
query:{presets:['latest']},
exclude: path.resolve(__dirname,'./node_modules')
},{
test: /\.css$/,
loader: 'style-loader!css-loader',
},{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader',
},{
test: /\.html$/,
loader: 'html-loader',
},{
test: /\.(jpg|png|gif|svg)$/i,
use: ['url-loader?limit=500&name=images/[name]-[hash:5].[ext]','image-webpack-loader'],
}
]
}
}

webpack的use可以换成loader或者loaders，loader传字符串，loaders传数组，use和loaders一样

babel-loader需要按官网上面说的一样,安装3个东西（2个时编译器，一个是预设）：

npm i babel-loader babel-core babel-preset-latest -D

style-loader是把解析好的css文件以<style></style>的方式插入网页

css-loader是解析css文件

npm i css-loader style-loader -D

sass-loader处理sass

npm i node-sass sass-loader -D

html-loader处理html

npm i html-loader -D

image-wepack-loader 压缩图片

url-loader 图片转base64，传参limit,小于limit kb时转base64,否则传给file-loader

file-loader 直接打包图片，必须安装这个～～

总结：

css代码import入js文件就行了，而html必须最后要在app的dom渲染到