webpack4.41.0配置二（加載器_url-loader/babel-loader/sass-loader）

loader是webpack用來預處理源文件的，比如typesrcipt形式的文件最終都得轉成瀏覽器可以執行的js文件

（注：以下的配置代碼不一定與下方一摸一樣，具體與官網上https://webpack.docschina.org/loaders/的為准，如無一般說明配置文件都指的是webpack.config.js）

 

 

url-loader

1.先在配置文件中配置Loader(具體的配置代碼去https://webpack.docschina.org/loaders/file-loader/復制即可)

module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        option: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }

插入上面代碼同時建立入口文件input.js和建立一個存放圖片得文件夾，並在input.js中導入

 2.因為上面我們使用了Loader,所以需要下載相應得Loader

首先需要生成一下配置文件package.json，輸入命令：npm init -y

然后執行npm install url-loader -S下載url-loader(-S代表安裝完之后要記錄到package.json配置文件中)和npm install file-loader -S

之后package.json配置文件會出現以下內容：

3.最后執行webpack,打包成功

 

---

 

 

babel-loader

1.安裝命令：npm install -D babel-loader @babel/core @babel/preset-env webpack（preset-env負責劍將es6語法轉成es5語法）

2.在input.js中書寫下面例子代碼

 3.在配置文件中添加規則（如果不配置以下代碼直接打包，那個打包過后的代碼還會擁有es6語法的代碼，低版本的瀏覽器運行不起來es6語法）

const path = require('path');

module.exports = {

    entry: './input.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'output.bundle.js'

    },

    module: {

        rules: [

            {

                test: /\.(png|jpg|gif)$/i,

                use: [

                    {

                        loader: 'url-loader',

                        options: {

                            //小於限制的變成base64,大於的變成普通的物理文件

                            limit: 8192

                        }

                    }

                ]

            },

             {

                test: /\.m?js$/,

                //排除一些文件

                exclude: /(node_modules|bower_components)/,

                use: {

                    loader: 'babel-loader',

                    options: {

                        presets: ['@babel/preset-env']

                    }

                }

            }

        ]

    }

}

 

4.執行打包命令：webpack，成功打包

 

---

 

 

sass-loader

1.安裝命令：npm install sass-loader node-sass -D

　　　　　　npm install style-loader css-loader -D

2.書寫規則在webpack.config.js中添加

{
            test: /\.scss$/,
            use: [
                "style-loader", // 將 JS 字符串生成為 style 節點
                "css-loader", // 將 CSS 轉化成 CommonJS 模塊
                "sass-loader" // 將 Sass 編譯成 CSS，默認使用 Node Sass
            ]
        }

 3.在input.js中向上方一樣書寫一些簡單例子最后進行打包

歡迎繼續查看webpack4.41.0配置三（插件minCssExtract/ DefinePlugin/Html）：https://www.cnblogs.com/ahaMOMO/p/11632028.html