Webpack学习2--管理资源需要安装并添加style-loader、css-loader到module配置中才能够在

预备

初始项目结构、内容如下：

project

webpac_project
 |- /node.module
 |- /dist
   |- index.html
 |- /src
   |- index.js
   |- style.css
 |- package.json
 |- webpack.config.js

/dist/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>asset management</title>
    </head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>

/src/index.js

import _ from 'lodash';

function component(){
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello','world'],' ');
    element.classList.add('hello');

    return element;
};
document.body.appendChild(component());

src/style.css

.hello{
    color:'red'
}

加载CSS

需要安装并添加style-loader、css-loader到module配置中才能够在JS中import一个CSS文件。

安装style-loader和css-loader：

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

在module中添加style-loader和css-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$/,   /*定义规则，遇到.css文件，加载style-loader和css-loader*/
                use:[
                    'style-loader'
                    'css-loader'
                ]
            }
        ]
    }
}

完成配置之后就可以在index.js中importcss文件了。

src/index.js

  import _ from 'lodash';
+ import './style.css';

  function component(){
      var element = document.createElement('div');
      element.innerHTML = _.join(['Hello,'webpack'],' ');
      element.classList.add('hello');
      
      return element;
  }
  document.body.appendChild(component());

运行构建命令，再次打开index.html,可发现字体已经红色。

npm run build

加载图片

在需要用到背景和图标等图片时，使用file-loader可以轻松将这些图片混合到css中。同样需要先安装并添加file-loader到module配置中。

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'
+         ]
+       }
      ]
    }
  };

接下来向项目中添加一个图像。

project

  webpack-project
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- img.png
    |- style.css
    |- index.js
  |- /node_modules

在index.js文件中添加对图片操作

src/index.js

  import _ from 'lodash';
  import './style.css';
+ import Icon from './img.jpg';
  function component(){
      var element = document.createElement('div');
      element.innerHTML = _.join(['Hello','world'],' ');
      element.classList.add('hello');

+     var myIcon = new Image();
+     myIcon.src = Icon;
+     element.appendChild(myIcon);
      return element;
  };
  document.body.appendChild(component());

将图片设置为.hello属性的背景。

src/style.css

.hello{
    color: 'red';
    background: url('./img.png');
}

重新构建webpack。

npm run build

再次打开index.html，可以看到图片已经添加到页面中了。

加载数据

操作与上面相同，先安装再添加csv-loader 、xml-loader到module中。

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

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

在项目中添加数据文件

  webpack-project
  |- 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/index.js

  import _ from 'lodash';
  import './style.css';
  import Icon from './img.jpg';
+ import Data from './data.xml';
  function component(){
      var element = document.createElement('div');
      element.innerHTML = _.join(['Hello','world'],' ');
      element.classList.add('hello');

      var myIcon = new Image();
      myIcon.src = Icon;
      element.appendChild(myIcon);
    
+     console.lgo(Data);    
    
      return element;
  };
  document.body.appendChild(component());

重新构建之后,打开index.html页面的控制台即可看到导入的数据被打印在里面。