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
     }
   }