webpack入門學習手記（四）

時間 2019-11-08

標籤 webpack 入門學習手記简体版

原文原文鏈接

本人微信公衆號： 前端修煉之路，歡迎關注。

再過一天，就是2019年了，在這裏祝你們新年快樂，闔家歡樂，萬事大吉。🎅🎅🎅css

在文章以前，簡單的回顧一下2018主要完成的事情，與君分享，共同進步。💪💪💪html

堅持健身🏃。這一年第一次堅持下了健身，每週最少1-2次。
取得駕照🚗。這一年成爲了合法的駕駛員，並擁有了人生第一輛私家車。
考入燕大👩‍🎓‍。這一年成功考入燕山大學繼續教育學院專升本，爲進一步提高學歷打下基礎。
完成項目👨‍💻‍。這一年在家待業成爲常態，期間接了私活，首次以我的能力完成項目。
原創文章✍️。這一年開啓了原創文章的寫做，發佈在微信公衆號、SegmentFault、掘金上。
學會滑雪🏂。這一年學會了單板滑雪，實現了多年前的願望。

如下是正文。前端

管理輸出

以前的文章學習瞭如何加載資源，這一節學習如何將資源輸出。webpack

對項目作一些修改，建立一個js文件。git

src/print.jsweb

export default function printMe() {
  console.log('I get called from print.js!');
}

在程序入口文件中，引用這個文件。這個文件的內容，對上一節的代碼作了修改。只保留了加載css樣式的代碼。npm

src/index.jssegmentfault

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。說明咱們的配置文件生效了。

這樣的話，就解決了上面提到的問題，之後文件名字修改以後，只須要修改配置文件中相應名字，而後執行打包命令就能夠了。