管理资源
上一节创建了一个基础项目,了解了webpack的打包。
现在,尝试混合一些其他资源,比如 images,css等,看看webpack 的处理。
在 webpack 出现之前,前端开发人员会使用 grunt 和 gulp 等工具来处理资源,并将它们从
/src
文件夹移动到/dist
或/build
目录中。JavaScript 模块也遵循同样方式,但是,像 webpack 这样的工具,将动态打包所有依赖(创建所谓的 依赖图(dependency graph))。这是极好的创举,因为现在每个模块都可以明确表述它自身的依赖,可以避免打包未使用的模块。
webpack 最出色的功能之一就是,除了引入 JavaScript,还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。
设置
dist/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack demo - 管理资源</title>
</head>
<body>
<script src='bundle.js'></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
加载css
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
所以如果需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader。
css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,将其转换成 commonjs 对象;
style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
为了在 JavaScript 模块中 import
一个 CSS 文件,接下来,安装 style-loader 和 css-loader,并在 module
配置中添加这些 loader。
命令行输入:
npm install --save-dev style-loader css-loader
执行以上命令后,会在当前目录生成 node_modules 目录,就是 css-loader 和 style-loader 的安装目录。
安装完成:
webpack.config.js
修改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$/i,
use: ['style-loader', 'css-loader'],
}
]
}
}
模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果(被转换后的资源)传递给下一个 loader,依此类推。最后,webpack 期望链中的最后的 loader 返回 JavaScript。
** loader 执行顺序也是从右到左的。因此,应保证 loader 的先后顺序:'style-loader'
在前,而 'css-loader'
在后。**
如果不遵守此约定,webpack 可能会抛出错误。
webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。
在上面的配置中,所有以 .css
结尾的文件,都将被提供给 style-loader
和 css-loader
。
可以在依赖于此样式的 js 文件中 import './style.css'
。
在此模块执行过程中,含有 CSS 字符串的 <style>
标签,将被插入到 html 文件的 <head>
中。
style.css
src 下面新建 style.css 文件:
.hello {
color: red;
}
项目结构
此时目录结构:
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- style.css
|- index.js
|- /node_modules
修改 src/index.js:
import _ from 'lodash';
import './style.css'
function component () {
const element = document.createElement('div');
// lodash 在当前 script 中使用 import 引入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
return element;
}
document.body.appendChild(component());
运行 build 命令:
webpack 根据模块的依赖关系进行静态分析,这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。
在页面启动时,会先执行 index.js 中的代码,其它模块会在运行 require 的时候再执行。
在浏览器中打开 dist/index.html
,可以看到, Hello webpack
现在的样式是红色:
鼠标右键检查页面,可以看到,页面的 head 标签包含 style 块元素,也就是在 index.js
中 import 的 css 文件中的样式: