webpack入门学习手记（四）

42次阅读

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

本人微信公众号：前端修炼之路，欢迎关注。
再过一天，就是 2019 年了，在这里祝大家新年快乐，阖家欢乐，万事大吉。????????????
在文章之前，简单的回顾一下 2018 主要完成的事情，与君分享，共同进步。????????????

坚持健身????。这一年第一次坚持下了健身，每周最少 1 - 2 次。
取得驾照????。这一年成为了合法的驾驶员，并拥有了人生第一辆私家车。
考入燕大????‍????‍。这一年成功考入燕山大学继续教育学院专升本，为进一步提升学历打下基础。
完成项目????‍????‍。这一年在家待业成为常态，期间接了私活，首次以个人能力完成项目。
原创文章✍️。这一年开启了原创文章的写作，发布在微信公众号、SegmentFault、掘金上。
学会滑雪????。这一年学会了单板滑雪，实现了多年前的愿望。

以下是正文。
管理输出
之前的文章学习了如何加载资源，这一节学习如何将资源输出。
对项目做一些修改，创建一个 js 文件。
src/print.js
export default function printMe() {
console.log(‘I get called from print.js!’);
}
在程序入口文件中，引用这个文件。这个文件的内容，对上一节的代码做了修改。只保留了加载 css 样式的代码。
src/index.js
import _ from ‘lodash’;
import printMe from ‘./print.js’
import ‘./style.css’;

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

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

// add a button to print log
btn.innerHTML = ‘Click me and check the console!’;
btn.onclick = printMe;

element.appendChild(btn);

return element;
}

document.body.appendChild(component());
修改配置文件，将新增加的文件进行打包。
webpack.config.js
const path = require(‘path’);

module.exports = {
entry: {
app: ‘./src/index.js’,
print: ‘./src/print.js’ // 也可以不打包这个文件，因为在 index.js 中已经引入了
},
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
module: {
rules: [{
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’]
}]
}
};
这时，配置文件的 entry 入口，改成了对象形式，允许传入多个文件。其中的对象属性名 app 和 print，在输出文件属性 output.filename 中以占位符 [name] 的形式展示。
因为加载了 css，所以添加了相应的 loader。

注意：其实在入口文件中，可以不将 src/print.js 文件打包，因为在打包生成的 dist/app.bundle.js 文件中，已经包含了 src/print.js 文件中的内容。

在页面文件中引用新打包好的文件。
dist/index.html
<!doctype html>
<html>
<head>
<title>Output Management</title>
<script src=”./print.bundle.js”></script>
</head>
<body>
<script src=”./app.bundle.js”></script>
</body>
</html>
最后执行打包命令 npm run build 之后，会在 dist 目录发现新生成的打包文件。
添加插件
现在设想一下，假如修改了原始文件 index.js 和 print.js 的名字，该怎么办呢？难道手动一个个去修改文件名吗？如果文件数量扩大到 20 个呢？
通过 webpack 插件可以很自动化的完成上面的需求。
添加 html-webpack-plugin 和 clean-webpack-plugin 这两个插件。第一插件是用来生成 html 页面的，会自动将 output.filename 输出文件添加到页面中。第二个插件是用来清理 /dist 目录的，防止项目目录过于杂乱。
首先安装这两个插件
npm install –save-dev html-webpack-plugin clean-webpack-plugin
然后修改配置文件，引用这两个插件。
webpack.config.js
const path = require(‘path’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);

module.exports = {
entry: {
app: ‘./src/index.js’,
print: ‘./src/print.js’ // 也可以不打包这个文件，因为在 index.js 中已经引入了
},
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
module: {
rules: [{
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’]
}]
},
plugins:[
new HtmlWebpackPlugin({title: ‘Output Management’}),
new CleanWebpackPlugin([‘dist’])
]
};
在 plugins 中，以数组的形式，添加了这两个插件。html-webpack-plugin 接受的 title 属性，就是生成的 html 页面中 title。clean-webpack-plugin 接受的参数，就是要清理的目录名称。
现在如果执行打包命令 npm run build，会发现 webpack 先删除了 dist 目录，然后生成相应的文件。如果打开 index.html 文件，会发现我们在 header 部分引入的 js 文件，已经被 webpack 移动到了 body。说明我们的配置文件生效了。
这样的话，就解决了上面提到的问题，以后文件名字修改之后，只需要修改配置文件中相应名字，然后执行打包命令就可以了。