webpack入门学习手记（三）

4次阅读

共计 6505 个字符，预计需要花费 17 分钟才能阅读完成。

本人微信公众号：前端修炼之路，欢迎关注。
距离上一次更新这个系列，过去了两天。最近实在是有点忙，没有挤出时间整理。感觉日更还真是困难????
以下是正文。
管理资源
如果看过之前的系列文章，应该会有一个学习项目 webpackStudy，可以从文章下方找到之前的链接。官网给出的示例都是在一个项目中的 html 页面、package.json 和 webpack.config.js 中进行修改。我为了保留每一小节的代码，并没有按照官网给出的方案处理，而是重新新建的配置文件。可以通过腾讯云开发者平台查看源码。
webpack 有两大特色：

动态打包。在 webpack 中，每个模块都会声明所引用的依赖，这样就避免了打包没有使用到的模块。另外通过配置，可以避免重复打包相同的引用，提高打包效率。
强大的 loader。通过 loader，webpack 可以引入任何其他的非 JavaScript 文件。例如，加载 css、图片、字体、JSON、XML 等。

加载 css
首先安装两个 loader：style-loader、css-loader。执行如下命令：
npm install –save-dev style-loader css-loader

注意建议使用淘宝 NPM 镜像

然后在 webpack.config.js 中添加使用 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’]
}]
}
};
添加 module.rules 表示要使用的 loader 规则。test 属性使用正则表达式匹配任何的.css 文件。use 属性通过一个数组，表示匹配到的文件使用哪些需要加载的 loader，这里就是 style-loader 和 css-loader。
接下来在项目中添加一个 style.css 文件，并修改下 index.js。
project
|- /src
+ |- style.css
|- index.js
|- /node_modules
src/style.css
.hello {
color: red;
}
src/index.js
import _ from ‘lodash’;
import ‘./style.css’;

function component() {
let element = document.createElement(‘div’);

// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
element.classList.add(‘hello’);

return element;
}

document.body.appendChild(component());
在 index.js 文件中，通过 import 将 style.css 文件引入。在 style.css 中添加了一个 hello 样式。index.js 文件中，直接使用了这个 css 样式。
也就是说，在 js 文件中，直接使用了 css 代码。感觉非常酷~
然后执行打包命令，看看有什么变化~
npm run build
此时用浏览器打开 index.html，会发现之前的 Hello webpack 变成了红色。请注意，之前我们并没有在 index.html 中引入任何的 css 样式。用浏览器检查一下页面，就会知道 webpack 是怎么做到的了。

说明 webpack 将 css 代码自动添加到 head 标签中了，非常的智能化~
加载图片
接下来尝试下加载图片和在 css 中引用背景图片。这时我们要使用 file-loader。
npm install –save-dev file-loader
在 webpack.config.js 中添加一段使用 loader 的配置。
webpack.config.js
module: {
rules: [{
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [‘file-loader’]
}]
}
然后在项目中添加一张图片。
project
|- /src
+ |- icon.jpg
|- style.css
|- index.js
|- /node_modules
最后，添加引用图片和使用背景图片代码。
src/index.js
import _ from ‘lodash’;
import ‘./style.css’;
import Icon from ‘./icon.jpg’;

function component() {
let element = document.createElement(‘div’);

// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
element.classList.add(‘hello’);

// Add the image to our existing div.
var myIcon = new Image();
myIcon.src = Icon;

element.appendChild(myIcon);

return element;
}

function component() {
let element = document.createElement(‘div’);

// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join([‘Hello’, ‘webpack’], ‘ ‘);
element.classList.add(‘hello’);

// Add the image to our existing div.
var myIcon = new Image();
myIcon.src = Icon;

console.log(Data);

element.appendChild(myIcon);

return element;
}

document.body.appendChild(component());
目前执行到这里一切看起来都很容易。创建一个 data.xml 文件，然后加一些假数据，最后在 index.js 中打印这个数据。但是当我执行打包命令 npm run build 时，一切都不那么的和谐了。出现了如下的错误：
build error

> webpackStudy@1.0.0 build /Users/yyy/Documents/work/workspace/webpackStudy
> webpack –config webpack.config.js

/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.3.1.2@webpack-cli/bin/cli.js:244
throw err;
^

Error: Cannot find module ‘@webassemblyjs/helper-code-frame’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:658:17)
at require (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.1.7.11@@webassemblyjs/wast-parser/lib/grammar.js:8:24)
at Module._compile (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:658:17)
at require (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.1.7.11@@webassemblyjs/wast-parser/lib/index.js:11:38)
at Module._compile (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
这就很奇怪了，意思是说找不到一个模块。经过一番苦苦查找，终于知道了原因。
需要将 webpack4 版本降到 webpack3 版本。我找到的版本是 3.11.0。我将 wepack 卸载掉，然后安装这个版本之后，再次打包，就成功了。