webpack之管理资源

npm 5，你可能还会在目录中看到一个 package-lock.json 文件

1. 加载css

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

npm install --save-dev style-loader css-loader

第二步：在webpack.config.js中添加module
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'
+    ]
+   }
  ]
 }
}

第三步：在js文件当中引入css

import './style.css';

webpack根据正则表达式，确定要查找哪些文件，并将其提供给指定的loader。当该模块运行时，css样式将以style标签的形式插入到HTML的中

2.加载图片

使用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'
        ]
      }
    ]

  }

};

将图片添加到js文件中,并在js文件中使用图片或者在css文件中直接引用
js文件中：

import icon from './assets/123.png'

   //将图片添加到现有的div
    var myIcon=new Image();
    myIcon.src= Icon;
    element.appendChild(myIcon);

css文件中：

.hello{
 background: url('./123.png');
}

得到的图片的src如上面的图，src的值变得复杂了，这说明webpack找到了该文件并处理过它。
压缩和优化图像可以看image-webpack-loader和url-loader

3.加载字体

file-loader和url-loader可以接收并加载任何文件，然后将其输出到构建目录。
第一步：引入字体：
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
第二步：配置
“`
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:[            ‘style-loader’,            ‘css-loader’          ]        },        {          test: /.(png|svg|jpg|gif) /,
use: [
‘file-loader’
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
‘file-loader’
]
}
]

}

};

第三步：
loader配置好，字体也准备好了，使用`@font-face`来合并它们。

@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(./123.png”);
}
``
webpack使用本地url(…)`指令来引入字体，就像引入image时一样。

4.加载字体

类似于node，webpack对JSON的支持是内置的。import Data from './data.json'默认正常运行。导入CSV,TSV,和XML，可以用csv-loader和xml-loader

npm install --save-dev csv-loader xml-loader

在配置文件webpack.config.js中,添加module配置如下

   {
        test: /\.(csv|tsv)$/,
        use:[
          'csv-loader'
        ]
      },
      {
        test:/\.xml$/,
        use:[
          'xml-loader'
        ]
      }

现在，可以在js文件中引用了

import Data from './data.xml'

function getData(){
 console.log(Data);
}