配置loader

通过 loader 引入任何其他类型的文件。用来构建网站或 web 应用程序中的所有非 JavaScript 内容。

加载CSS

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中 安装并添加 style-loader 和 css-loader：

安装

$ npm i style-loader css-loader -D

webpack.config.js

module.exports = {
  // ......
   module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
       }
     ]
   }
 };

更改样式，进行测试。（之前进行过演示，此处不再进行演示。）

配置autoprefixer

autoprefixer是一个后处理程序，你可以同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要为哪些浏览器加前缀，只需全新关注于实现，并使用W3C最新的规范。

安装

$ npm i postcss-loader autoprefixer postcss -D

webpack.config.js

module.exports = {
  // ......
   module: {
     rules: [
       		  {
                test:/\.css$/,
                use:[
                  'style-loader',
                  {
                    loader:'css-loader',
                    options:{importLoaders:1}
                    },
                  // importLoaders代表import进来的资源；
                  // 2代表css-loader后还需要使用几个loader
                  {
                    loader: 'postcss-loader',
                    options:{
                      plugins:[
                        require("autoprefixer")("last 100 versions")
                      ]
                    }
                  }
                ],
                exclude:path.resolve(__dirname,'/node_modules'),
                include:path.resolve(__dirname,'src')
              }
            ]
           }
  };

写postcss的配置文件 postcss.config.js,引入autoprefixer

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

测试

兼容性CSS，在页面进行验证。

box {display: flex;}

加载less

安装

$ npm i extract-text-webpack-plugin  -D

使用 ExtractTextPlugin 将样式表抽离成专门的单独文件。

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  // ......
    module: {
          rules: [
              {
                  test: /\.less$/,
                  use: env == "dev" ?["style-loader","css-loader?minimize","postcss-loader","less-loader"]:ExtractTextPlugin.extract({
                                          use: ["css-loader?minimize","postcss-loader","less-loader"]})
              },
          ]
      }
};

加载图片

使用 file-loader，就可以轻易的加载图像。

安装

$ npm i file-loader -D

webpack.config.js

{
  // ......
module.exports = {
  // ......
   module: {
     rules: [
       {
          test: /\.(jpg|png|jpeg|bmp|gif)$/,
          use: [
            'file-loader'
          ]
       },
       }
     ]
   }
 };

测试

在CSS文件添加img测试：

box {
    background: url('./01.png');
}

编译控制台显示

ash: fe69071b6b03a87929f8
Version: webpack 4.26.1
Time: 2025ms
Built at: 2018-11-29 15:00:01
                                                      Asset      Size  Chunks             Chunk Names
./dist/assets/images/01.png64904cee6c00ad23e4b2bc82bcb500f1  72.1 KiB          [emitted]
                                                  bundle.js  25.7 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./01.png] 105 bytes {main} [built]
[./entry.js] 123 bytes {main} [built]
[./module.js] 34 bytes {main} [built]
[./node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js!./style.css] ./node_modules/css-loader??ref--4-1!./node_modules/postcss-loader/src!./style.css 812 bytes {main} [built]
[./style.css] 1.2 KiB {main} [built]
    + 4 hidden modules

看到./dist/assets/images/01.png64904cee6c00ad23e4b2bc82bcb500f1 就是webpack找到我们的图片，并且已经处理完毕。

加载字体

file-loader 和 url-loader 可以接收并加载任何文件，将其输出到构建目录。

安装

$ npm i url-loader -D

webpack.config.js

{
  // ......
module.exports = {
  // ......
   module: {
     rules: [
     { 
         test: /\.(ttf|woff|woff2|eot|svg)$/,
         use: [
            'file-loader'
          ]
      }
      }
     ]
   }
 };

测试

添加my-font.woff和my-font.woff2文件，来进行测试。

加载ES6

现在我们使用JS，使用ES6语法比较多，webpack中使用babel-loader

安装

$ npm i babel-loader -D

webpack.config.js

{
  // ......
module.exports = {
  // ......
   module: {
     rules: [
              {
                test: /\.js$/,
                use: [{
                    loader: "babel-loader"
                }],
                exclude: [/node_modules/]//把node_modules中的文件过滤掉
           }
       }
     ]
   }
 };

配置babel新建.babelrc

{
  "presets": [
    ["env", { "modules": false }],
    "react",
    "stage-0"
  ],
  "plugins": [
    ["import", { "libraryName": "antd", "style": "css" }]
  ]
}