2.管理资源

管理资源

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

加载 CSS、图片、字体、数据

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

• src/index.js

import _ from 'lodash';
import './css/style.css';
import Icon from './img/icon.jpg';
import Data from './data/data.xml';

function component() {
	var element = document.createElement('div');

	// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
	element.innerHTML = _.join(['Hello', 'webpack'], ' ');
	element.classList.add('hello');
	
	console.log(Data);
	return element;
}

document.body.appendChild(component());

全局资源

• 资源模块化

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png