Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件

Webpack是一个模块化打包的工具，可以将各种静态资源打包为一个或几个js、css文件，方便开发和生产环境部署使用。其中，模块加载器（Loaders）和ExtractTextPlugin插件都是Webpack常见的静态资源处理方式，下面详细介绍它们的使用。

一、模块加载器（Loaders）

在Webpack中，模块加载器（Loaders）是用来处理各种静态资源的工具，可以将不同类型的文件转换为可被Webpack识别的模块。Loaders通常以两个条件命名：文件类型和转换器（-loader结尾）。例如，使用babel-loader可以将ES6/7/8转换为ES5，使用file-loader可以处理各种文件类型，将文件输出到指定目录。

1.1 安装和配置Loaders

以babel-loader为例，安装babel-loader和babel-core：

npm install -D babel-loader babel-core

在webpack.config.js中配置babel-loader：

module: {
  rules: [
    {
      test: /\.js$/, // 匹配js文件
      use: 'babel-loader' // 使用babel-loader处理js文件
    }
  ]
}

1.2 Loaders示例

以下是一个使用babel-loader的示例：

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default App;

运行webpack后，通过babel-loader将ES6转换为ES5，输出以下代码：

"use strict";

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var App =
/*#__PURE__*/
function (_React$Component) {
  _inherits(App, _React$Component);

  function App() {
    _classCallCheck(this, App);

    return _possibleConstructorReturn(this, _getPrototypeOf(App).apply(this, arguments));
  }

  _createClass(App, [{
    key: "render",
    value: function render() {
      return _react["default"].createElement("h1", null, "Hello, World!");
    }
  }]);

  return App;
}(_react["default"].Component);

exports["default"] = App;

二、ExtractTextPlugin插件

ExtractTextPlugin插件可以将webpack打包生成的CSS代码提取到单独的css文件中，防止将CSS打包到JS文件中影响文件加载速度。使用ExtractTextPlugin插件需要先安装：

npm install -D extract-text-webpack-plugin

在webpack.config.js中配置ExtractTextPlugin插件：

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
};

在CSS文件中使用@import引入其他CSS文件，并通过ExtractTextPlugin插件打包为styles.css文件：

/* main.css */
@import 'reset.css';

body {
  font-size: 14px;
  line-height: 1.5;
}

/* reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* ... more reset styles ... */

以上便是Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件的完整攻略，希望对你有所帮助。