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