<i id='qi5a4'><tr id='qi5a4'><dt id='qi5a4'><q id='qi5a4'><span id='qi5a4'><b id='qi5a4'><form id='qi5a4'><ins id='qi5a4'></ins><ul id='qi5a4'></ul><sub id='qi5a4'></sub></form><legend id='qi5a4'></legend><bdo id='qi5a4'><pre id='qi5a4'><center id='qi5a4'></center></pre></bdo></b><th id='qi5a4'></th></span></q></dt></tr></i><div id='qi5a4'><tfoot id='qi5a4'></tfoot><dl id='qi5a4'><fieldset id='qi5a4'></fieldset></dl></div>
    1. <tfoot id='qi5a4'></tfoot>
      <legend id='qi5a4'><style id='qi5a4'><dir id='qi5a4'><q id='qi5a4'></q></dir></style></legend>

      <small id='qi5a4'></small><noframes id='qi5a4'>

          <bdo id='qi5a4'></bdo><ul id='qi5a4'></ul>
      1. Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件

        时间:2023-12-14
              <tbody id='sZ703'></tbody>

            <small id='sZ703'></small><noframes id='sZ703'>

            <tfoot id='sZ703'></tfoot>

          • <legend id='sZ703'><style id='sZ703'><dir id='sZ703'><q id='sZ703'></q></dir></style></legend>
                  <bdo id='sZ703'></bdo><ul id='sZ703'></ul>

                  <i id='sZ703'><tr id='sZ703'><dt id='sZ703'><q id='sZ703'><span id='sZ703'><b id='sZ703'><form id='sZ703'><ins id='sZ703'></ins><ul id='sZ703'></ul><sub id='sZ703'></sub></form><legend id='sZ703'></legend><bdo id='sZ703'><pre id='sZ703'><center id='sZ703'></center></pre></bdo></b><th id='sZ703'></th></span></q></dt></tr></i><div id='sZ703'><tfoot id='sZ703'></tfoot><dl id='sZ703'><fieldset id='sZ703'></fieldset></dl></div>

                  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插件的完整攻略,希望对你有所帮助。

                  上一篇:详解CSS Masking模块之Clipping 下一篇:css 字体设置(不同浏览器设置效果)

                  相关文章

                    <bdo id='gguuz'></bdo><ul id='gguuz'></ul>

                      <i id='gguuz'><tr id='gguuz'><dt id='gguuz'><q id='gguuz'><span id='gguuz'><b id='gguuz'><form id='gguuz'><ins id='gguuz'></ins><ul id='gguuz'></ul><sub id='gguuz'></sub></form><legend id='gguuz'></legend><bdo id='gguuz'><pre id='gguuz'><center id='gguuz'></center></pre></bdo></b><th id='gguuz'></th></span></q></dt></tr></i><div id='gguuz'><tfoot id='gguuz'></tfoot><dl id='gguuz'><fieldset id='gguuz'></fieldset></dl></div>

                      <legend id='gguuz'><style id='gguuz'><dir id='gguuz'><q id='gguuz'></q></dir></style></legend>

                      <tfoot id='gguuz'></tfoot>
                    1. <small id='gguuz'></small><noframes id='gguuz'>