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渲染到