本人微信公众号：前端修炼之路，欢迎关注。再过一天，就是2019年了，在这里祝大家新年快乐，阖家欢乐，万事大吉。????????????在文章之前，简单的回顾一下2018主要完成的事情，与君分享，共同进步。????????????坚持健身????。这一年第一次坚持下了健身，每周最少1-2次。取得驾照????。这一年成为了合法的驾驶员，并拥有了人生第一辆私家车。考入燕大????????。这一年成功考入燕山大学继续教育学院专升本，为进一步提升学历打下基础。完成项目????????。这一年在家待业成为常态，期间接了私活，首次以个人能力完成项目。原创文章✍️。这一年开启了原创文章的写作，发布在微信公众号、SegmentFault、掘金上。学会滑雪????。这一年学会了单板滑雪，实现了多年前的愿望。以下是正文。管理输出之前的文章学习了如何加载资源，这一节学习如何将资源输出。对项目做一些修改，创建一个js文件。src/print.jsexport default function printMe() { console.log(‘I get called from print.js!’);}在程序入口文件中，引用这个文件。这个文件的内容，对上一节的代码做了修改。只保留了加载css样式的代码。src/index.jsimport _ 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.jsconst 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.jsconst 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。说明我们的配置文件生效了。这样的话，就解决了上面提到的问题，以后文件名字修改之后，只需要修改配置文件中相应名字，然后执行打包命令就可以了。以上就是指南手册中的Output Management部分。总结一下主要内容：打包多个入口文件，并输出到相应的文件中。通过插件自动化生成html页面，并添加相应引用文件。通过插件清理项目文件。下一篇笔记整理webpack官方文档的指南手册剩余部分，敬请关注。（待续）相关文章webpack入门学习手记（一）webpack入门学习手记（二）webpack入门学习手记（三）webpack入门学习手记（四）