webpack加载不一样的资源

时间  2019-12-06
标签 webpack 加载 不一样 资源 繁體版
原文   原文链接
本文内容以下：

1 加载单一JS文件
2 加载2个或多个js
3 引入JSON文件
4 加载字体
5 加载数据CSV/TSV/XML
6 加载CSS文件介绍
7 实际操做：
8 单独打包CSS，ExtractTextWebpackPlugin插件
9 CSS modules
10 CSS预处理器
11 加载Sass
12 在 Webpack 中使用公用 CDN
13 当第三方库，不支持CommonJS或AMD时。或者须要前置库时。
13.1 使用webpack.ProvidePlugin
13.2 使用imports-loader


加载单一JS文件

以lodash.js为例子javascript

安装lodashcss

npm i lodash --save-dev复制代码

//index.jshtml

import _ from 'lodash';
function component () {
  var element = document.createElement('div');
  /* 须要引入 lodash，下一行才能正常工做 */
  element.innerHTML = _.join(['Hello','webpack'], ' ');
  return element;
}
document.body.appendChild(component());复制代码

而后运行webpack。便可。java

加载2个或多个js

若是是本身写的代码，经过require("./book.js");引入便可。node

若是是第三方库，先安装，再经过require()或import引入便可。react

引入JSON文件

zyx456：JSON文件能够直接用require(filename）引入使用。jquery

var config = require('./test.json');
 import Data from './data.json'复制代码

相似于 NodeJS，JSON 支持其实是内置的，也就是说将正常运行。webpack

项目目录：git

JS/github

  • config.json
  • entry.js

//test.json文件

{
  "greetText": "Hi there and greetings from JSON!"
}复制代码

entry.js

var config = require('./test.json');
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = config.greetText;
  return greet;
};复制代码

加载字体

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

这就是说，咱们能够将它们用于任何类型的文件，包括字体。

webpack.config.js

const path = require('path');
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [           'file-loader'         ]
       }
      ]
    }
  };复制代码

在项目中添加一些字体文件：

project

webpack-demo  
|- package.json  
|- webpack.config.js 
|- /dist    
|- bundle.js    
|- index.html  
|- /src+   
|- my-font.woff+  
|- my-font.woff2
|- icon.png
|- style.css
|- index.js
|- /node_modules复制代码

配置加载器并使用字体后，可使用@font-face声明来合并它们。

webpack将获取本地url(...)指令，就像使用图像同样：

src/style.css

+ @font-face {
+   font-family: 'MyFont';
+   src:  url('./my-font.woff2') format('woff2'),
+         url('./my-font.woff') format('woff');
+   font-weight: 600;
+   font-style: normal;
  }
  .hello {
    color: red;
   font-family: 'MyFont';
    background: url('./icon.png');
  }复制代码

加载数据CSV/TSV/XML

能够加载的有用资源还有数据，如 CSV、TSV 和 XML。

可使用 csv-loader 和 xml-loader。

npm install --save-dev csv-loader xml-loader复制代码

webpack.config.js

const path = require('path');
  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(csv|tsv)$/,
+         use: [
+           'csv-loader'
+         ]
+       },
+       {
+         test: /\.xml$/,
+         use: [
+           'xml-loader'
+         ]
+       }
      ]
    }
  };复制代码

project

webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- data.xml
    |- my-font.woff
    |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules复制代码

src/data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>复制代码

如今，你能够 import 这四种类型的数据(JSON, CSV, TSV, XML)中的任何一种，所导入的 Data 变量将包含可直接使用的已解析 JSON：

src/index.js

import _ from 'lodash';
  import './style.css';
  import Icon from './icon.png';
+ import Data from './data.xml';
  function component() {
    var element = document.createElement('div');
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
    // Add the image to our existing div.
    var myIcon = new Image();
    myIcon.src = Icon;
    element.appendChild(myIcon);
+   console.log(Data);
    return element;
  }
  document.body.appendChild(component());复制代码

加载CSS文件介绍

若是直接在index.js文件里引入 CSS：

import styles from './assets/stylesheets/application.css';复制代码

会遇到如下的错误：You may need an appropriate loader to handle this file type。

在应用中添加 css 文件，就须要使用到 css-loader 和 style-loader。

css-loader 会遍历 CSS 文件，而后找到 url() 表达式而后处理他们。可以使用相似@import 和 url(...)的方法实现 require()的功能。

style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

在编译时，css-loader会读取CSS文件，并处理其中的import，返回CSS代码；

而style-loader会将返回的CSS代码做为DOM的style。

在生产构建下，CSS 是会被打包到 JavaScript 里的，style-loader 会把你的样式写在 Style 标签里。

css-loader用来返回有@import和url()的css文件style-loader用来将css文件插入页面。

能够根据需求将一些图片自动转成base64编码的，减轻不少的网络请求。


实际操做：

安装 css-loader 和 style-loader(全局安装须要参数 -g)。

cnpm install css-loader style-loader复制代码

安装url-loader

npm install url-loader --save-dev复制代码

而后给 webpack.config.js 添加一条规则：

Loaders会根据数组的逆序运行，也就是说 css-loader会跑在 style-loader 前面。

module.exports = {
  // …
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      // …
    ],
  },
};复制代码


webpack 根据正则表达式，来肯定应该查找哪些文件，并将其提供给指定的 loader。在这种状况下，以 .css 结尾的所有文件，都将被提供给 style-loader 和 css-loader。

添加css文件，注意文件的路径。

js/style.css

body {background: yellow; }复制代码

在JS文件引入CSS文件。

import './style.css'复制代码

如何css文件根目录/css/a.css

那么

import '../css/a.css';复制代码

css会和js打包到同一个文件中。

实际网页中，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。

单独打包CSS，ExtractTextWebpackPlugin插件

单独打包CSS，把 CSS 从 js 文件当中独立出来。

若是把CSS打包到JS中，有一个性能上的问题，就是没法使用浏览器去异步并并行地加载CSS。

反而，你的文件须要等待整个JavaScript文件加载完，才能进行渲染。

在咱们的网页设计中，有一种平稳退化的概念。就是说，HTML是最重要的，其次是CSS，最后是JavaScript。

官方文档是以插件的形式作的:

webpack.github.io/docs/styles…

注意一下函数参数，第一第二个参数是有区别的，好比这样用：

第一个参数是编译好之后的代码用的，第二个参数是编译到源代码用的。

ExtractTextPlugin.extract('style-loader'， 'css!less')复制代码

对插件进行开发依赖安装

$ npm install --save-dev extract-text-webpack-plugin复制代码

而后，咱们须要修改咱们的webpack.config.js配置文件：

//webpack.config.js
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
        rules: [{
            test: /\.css$/,
            //use: [ 'style-loader', 'css-loader' ]
            use: ExtractTextPlugin.extract({
              use: 'css-loader'
            })
        }]
    },
    //ExtractTextPlugin
    plugins: [
      new ExtractTextPlugin('styles.css'),
    ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    inline: true
    }
};复制代码

这样的设置下，webpack会在dist文件夹中生成一个汇总的styles.css文件。

你须要将它做为一个单独的样式加入到index.html中。在HTML文件中手动引入.css文件。

CSS modules

最近有一个叫作 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，经过CSS模块，全部的类名，动画名默认都只做用于当前模块。

Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所须要作的一切就是把”modules“传递到所须要的地方，而后就能够直接把CSS的类名传递到组件的代码中，且这样作只对当前组件有效，没必要担忧在不一样的模块中使用相同的类名形成冲突。

具体的代码以下

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
};复制代码

在app文件夹下建立一个Greeter.css文件

.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}复制代码

导入.root到Greeter.js中

import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入
class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>//添加类名
        {config.greetText}
      </div>
    );
  }
}
export default Greeter复制代码

放心使用把，相同的类名也不会形成不一样组件之间的污染。

应用了css module后的样式

CSS modules 也是一个很大的主题，有兴趣的话能够去官方文档查看更多消息

CSS预处理器

Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们容许你使用相似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器能够这些特殊类型的语句转化为浏览器可识别的CSS语句。

你如今可能都已经熟悉了，在webpack里使用相关loaders进行配置就可使用了，如下是经常使用的CSS 处理loaders:

  • Less Loader
  • Sass Loader
  • Stylus Loader

不过其实也存在一个CSS的处理平台-PostCSS，它能够帮助你的CSS实现更多的功能，在其官方文档可了解更多相关知识。


举例来讲如何使用PostCSS，咱们使用PostCSS来为CSS代码自动添加适应不一样浏览器的CSS前缀。

首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）

npm install --save-dev postcss-loader autoprefixer复制代码

接下来，在webpack配置文件中添加postcss-loader，在根目录新建postcss.config.js,并添加以下代码以后，从新使用npm start打包时，你写的css会自动根据Can i use里的数据添加不一样前缀了。

//webpack.config.js
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}复制代码
// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}复制代码

加载Sass

zyx456：成功

运行以下命令来安装

npm install style-loader css-loader sass-loader node-sass extract-text-webpack-plugin -D复制代码

安装：

yarn add --dev sass-loader node-sass复制代码

而后加一条规则：

module.exports = {
  // …
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
        ]
      }
      // …
    ],
  },
};复制代码

这时候 JavaScript 文件里就能够用 import 来引用 .scss 或者 .sass 文件。

使用：

import './scss/base.scss'复制代码

或者打包成单独的CSS文件。

webpack.config.js

output: {
  ...
},
module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }
  ]
}复制代码

这将告诉webpack，咱们但愿将全部CSS打包成一个单独的文件，并将其称为style.css 。

plugins: [
  new ExtractTextPlugin('style.css')
]复制代码

在head标签中引入css文件：

<link rel='stylesheet' href='dist/style.css'>复制代码

插件会报错：

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

缘由：

extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。

解决办法：

npm install extract-text-webpack-plugin@next --save-dev

会下载到+ extract-text-webpack-plugin@4.0.0-beta.0

而后在打包就正常了。

图片.png

加载图片

CSS中的背景和图标，怎么办？

使用 file-loader，咱们能够轻松地将这些内容混合到 CSS 中：

npm install --save-dev file-loader复制代码

webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
      ]
    }
  };复制代码

用法：

import MyImage from './my-image.png'复制代码

该图像将被处理并添加到 output 目录，而且 MyImage 变量将包含该图像在处理后的最终 url。

在 Webpack 中使用公用 CDN

module.exports={ externals: {    moment: true
  }
}复制代码

固然了 HTML 代码里须要加上一行

<script src="//apps.bdimg.com/libs/moment/2.8.3/moment-with-locales.min.js"></script>复制代码

当第三方库，不支持CommonJS或AMD时。或者须要前置库时。

有时候会要加载各类各样的第三方库，一些老的库不支持AMD或者CommonJS等一些先进的格式，好比一些jQuery的插件，它们都依赖jQuery，若是直接引用就会报错 jQuery is not undefined这类的错误，有几种方法解决。

先建立一个jQuery plugin: plugin.js

(function ($) {
    const shade = "#556b2f";
    $.fn.greenify = function() {
        this.css( "color", shade );
        return this;
    };
}(jQuery));复制代码


第一种方法:使用webpack.ProvidePlugin

ProvidePlugin

webpack提供一个插件把一个全局变量插入到全部的代码中，在webapck.config.js里面配置

能够将模块做为一个变量，被 webpack 在其余每一个模块中引用。

只有须要使用此变量的时候，这个模块才会被 require 进来。

多数以前遗留的模块，会依赖于已存在的某些特定全局变量，好比 jQuery 插件中的 $ 或者 jQuery。

在这种场景，你能够在每次遇到全局标识符 $ 的时候，在 webpack 中预先设置

var $ = require(“jquery”)。

...
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    }),
    //provide $, jQuery and window.jQuery to every script
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
  ...复制代码

在js中引用

...
//这个也不须要了 由于$, jQuery, window.jQuery均可以直接使用了
//import $ from 'jquery';
import './plugin.js';
...
myPromise.then((number) => {
  $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
  //call our jquery plugin!
  $('p').greenify();
});
...复制代码

发现咱们插入的p里面的颜色已经变成了绿色！

第二种方法：使用imports-loader

先安装这个loader

imports-loader 

npm install imports-loader --save-dev复制代码

而后在入口js中

//注意这种写法 咱们把jQuery这个变量直接插入到plugin.js里面了
//至关于在这个文件的开始添加了 var jQuery = require('jquery');
import 'imports?jQuery=jquery!./plugin.js';
//后面的代码同样
myPromise.then((number) => {
  $('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
  //call our jquery plugin!
  $('p').greenify();
});复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程