webpack资源管理

webpack管理资源:
现在我们尝试混合一些其他资源，比如 images，看看 webpack 如何处理。
在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，
并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。JavaScript 模块也遵循同样方式，但是，像 webpack 这样的工具，将动态打包所有依赖（创建所谓的依赖图(dependency graph)）。这是极好的创举，因为现在每个模块都可以明确表述它自身的依赖，可以避免打包未使用的模块。

webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 
引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点
（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 
JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这个设置。

1.加载CSS
为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置中添加这些 loader：
指令：安装到本地
npm install --save-dev style-loader css-loader
2.加载图片
现在我们正在下载 CSS，但是像 background 和 icon 这样的图像，使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中：
指令：安装到本地
npm install --save-dev file-loader
3.加载字体
像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，也包括字体。让我们更新 webpack.config.js 来处理字体文件;
4.加载数据
此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。让我们处理加载这三类文件：
安装：xml-loader
npm install --save-dev csv-loader xml-loader
举例：工程结构
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src

|- data.xml
|- my-font.woff
|- icon.png
|- style.css
|- index.js
|- /node_modules

webpack.config.js 配置文件
const path = require(‘path’);

module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’),
publicPath:’./’ //默认使用的绝对路径，配置这个使用相对路径
},
module: {
rules: [
{
test: /.css $KaTeX parse error: Expected 'EOF', got '}' at position 264: \dots ] }̲, { \dots$ /,//图片
use: [
‘file-loader’
]
},
{
test: /.(woff|woff2|eot|ttf|otf) $KaTeX parse error: Expected 'EOF', got '}' at position 67: \dots ] }̲, { \dots$ /,//数据 csv,tsv
use: [
‘csv-loader’
]
},
{
test: /.xml$/,//数据xml
use: [
‘xml-loader’
]
}
]
}
};
index.js文件
import _ from ‘lodash’;
//导入css
import ‘./style.css’;
//导入图片
import Icon from ‘./icon.png’
import Data from ‘./data.xml’;
function component() {
let element = document.createElement(‘div’);

// lodash（目前通过一个 script 引入）对于执行这一行是必需的
element.innerHTML = _.join([‘Hello’, ‘webpack’], ’ ‘);
//标签添加class属性
element.classList.add(‘test’);
// 将图像添加到我们已经存在的 div 中。
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
//控制台输出xml数据
console.log(Data);
return element;
}
document.body.appendChild(component());
style.css文件
@font-face {
font-family: ‘MyFont’;
src: url(’./iconfont.woff’) format(‘woff’);
font-weight: 600;
font-style: normal;
}
.test{
color:blue;
background: url(’./icon.png’);
font-family: ‘MyFont’;
}

猜你喜欢