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 節(jié)點
         }, {
             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
     }
   }