webpack-loader

loader

是什麼？

loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 將所有型別的檔案，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的模組。

在更高層面，在 webpack 的配置中 loader 有兩個目標：

1. test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些檔案。
2. use 屬性，表示進行轉換時，應該使用哪個 loader。

怎麼用？

各種loader的流程大多相同的，可以分2步走。

1. 安裝依賴

2. 配置module

     module: {
       rules: [
         { test: /\.txt$/, use: 'raw-loader' }
       ]
     }
   複製程式碼

下面是幾個常用的loader示例，更多的詳細配置，可以參照這裡Loaders

css-loader

1. 安裝css-loader和style-loader

   npm install --save-dev style-loader css-loader
   複製程式碼

2. 配置webpack.config.js

   module: {
       rules: [{
           test: /\.css$/,
           use: [
             'style-loader',
             'css-loader'
           ]
         }
       }
   複製程式碼

sass-loader

1. 安裝sass-loader和node-sass

   npm install sass-loader node-sass webpack --save-dev
   複製程式碼

2. 配置webpack.config.js

   module.exports = {
     ...
     module: {
       rules: [{
         test: /\.scss$/,
         use: [{
             loader: "style-loader" // 將 JS 字串生成為 style 節點
         }, {
             loader: "css-loader" // 將 CSS 轉化成 CommonJS 模組
         }, {
             loader: "sass-loader" // 將 Sass 編譯成 CSS
         }]
       }]
     }
   };
   複製程式碼

babel-loader

1. 安裝babel-loader、@babel/core、@babel/preset-env

   npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
   複製程式碼

2. 配置webpack.config.js

   module: {
     rules: [
       {
         test: /\.js$/,
         exclude: /(node_modules|bower_components)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['@babel/preset-env']
           }
         }
       }
     ]
   }
   複製程式碼

TypeScript

大體與上面的操作相同，但是需要做一些額外的操作

1. 安裝typescript、ts-loader

   npm install --save-dev typescript ts-loader
   複製程式碼

2. 配置webpack.config.js

   resolve: {
       extensions: [ '.tsx', '.ts', '.js' ]
     },
   module: {
       rules: [
         {
           test: /\.tsx?$/,
           use: 'ts-loader',
           exclude: /node_modules/
         }
       ]
     },
   複製程式碼

3. 根目錄下新增檔案tsconfig.json,配置如下

   {
     "compilerOptions": {
       "outDir": "./dist/",
       "noImplicitAny": true,
       "module": "es6",
       "target": "es5",
       "jsx": "react",
       "allowJs": true
     }
   }
   複製程式碼