webpack入门学习手记(四)

533 阅读3分钟

本人微信公众号:前端修炼之路,欢迎关注。

再过一天,就是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入口,改成了对象形式,允许传入多个文件。其中的对象属性名appprint,在输出文件属性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.jsprint.js的名字,该怎么办呢?难道手动一个个去修改文件名吗?如果文件数量扩大到20个呢?

通过webpack插件可以很自动化的完成上面的需求。

添加html-webpack-pluginclean-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页面中titleclean-webpack-plugin接受的参数,就是要清理的目录名称。

现在如果执行打包命令npm run build,会发现webpack先删除了dist目录,然后生成相应的文件。如果打开index.html文件,会发现我们在header部分引入的js文件,已经被webpack移动到了body。说明我们的配置文件生效了。

这样的话,就解决了上面提到的问题,以后文件名字修改之后,只需要修改配置文件中相应名字,然后执行打包命令就可以了。

说明: 我将本小节代码托管到了腾讯云开发者平台,如果需要查看这节内容,请查找Output Management目录即可。


以上就是指南手册中的Output Management部分。总结一下主要内容:

  • 打包多个入口文件,并输出到相应的文件中。
  • 通过插件自动化生成html页面,并添加相应引用文件。
  • 通过插件清理项目文件。

下一篇笔记整理webpack官方文档的指南手册剩余部分,敬请关注。

(待续)

相关文章

webpack入门学习手记(一)

webpack入门学习手记(二)

webpack入门学习手记(三)

webpack入门学习手记(四)