webpack3学习2--管理资源

根据博文webpack3学习1–开始的操作，现在会有一个小项目，显示 “Hello webpack”。现在我们尝试整合一些其他资源，比如CSS和图片，看看 webpack 如何处理。

加载CSS

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

cnpm install --save-dev style-loader css-loader

webpack.config.js增加module=>rules配置：

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

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

这使你可以在依赖于此样式的文件中 import ‘./style.css’。现在，当该模块运行时，含有 CSS 字符串的 style 标签，将被插入到 html 文件的 head中。

在项目中添加一个新的 style.css 文件，并将其导入到我们的 index.js 中：

.hello {
    color: red;
}

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());

运行

npm run build
http-server

浏览器访问http://localhost:8080/dist/ ，可以看到Hello webpack变红了。

加载图片

可以使用 file-loader加载图片。

cnpm install --save-dev file-loader

webpack.config.js增加file-loader的配置

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

src目录下增加测试图片icon.png

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

index.js如下

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';

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

    element.classList.add('hello');//样式

    var myIcon = new Image();
    myIcon.src = Icon;
    element.appendChild(myIcon);//图片

    return element;
}

document.body.appendChild(component());

style.css增加背景图片：

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

运行

npm run build
http-server

浏览器访问http://localhost:8080/dist/ ，可以看到图片和背景图片。
webpack资源管理还可以加载字体、数据、全局资源等，下一步再研究。

本例子源代码地址：https://github.com/wu-boy/webpack-demo，demo2目录。

参考资料：
1.webpack中文网