一步一步帶你掌握webpack(三）——輸出管理

stone_fan發表於2019-04-15
Web

概述

本文在(一)的基礎上進行開發，介紹html-webpack-plugin和clean-webpack-plugin兩個外掛。
程式碼地址：github.com/fanxuewen/w… 1.在src下面新增print.js

export default function printMe() {
    
      alert('I get called from print.js!');
}
複製程式碼

2.在src/index.js中引入print.js並修改

  import  _ from 'lodash'
+ import printMe from './print.js'

function component(){

    let element =document.createElement('div');
    element.innerHTML=_.join(['Hello','webpack'],',');

  + let btn=document.createElement('button');
  + btn.innerHTML='click Me';
  + btn.onclick=printMe;
  + element.appendChild(btn);
    
    return element;
}
document.body.appendChild(component());
複製程式碼

3.修改dist/index.html

<body>
  - <script src="main.js"></script> 
  + <script src="./print.bundle.js"></script>
  + <script src="./app.bundle.js"></script>
</body>
複製程式碼

4.修改webpack.config.js

const path = require('path');
module.exports = {
 - entry:'main.js',
 + entry:{
 +     app:'./src/index.js',
 +     print:'./src/print.js'
 + },
    output: {
 -       filename:'main.js',
 +      filename:'[name].bundle.js',
 +      path: path.resolve(__dirname, 'dist')
    },
    mode: 'development'
};
複製程式碼

5.執行npm run build.可以看到在dist資料夾下生成了print.bundle.js 和app.bundle.js兩個檔案。在瀏覽器中開啟dist/index.html我們可以看到頁面可以正常執行。

一、html-webpack-plugin

我們在開始的時候dist下面的index.html是自己手動建的，且js也是手動引入的，這樣很不方便。html-webpack-plugin外掛的作用就是幫我們建立一個index.html並把生成的js也自動插入到新生成的index.html檔案中。
1.刪除dist下的所有檔案
2. npm install html-webpach-plugin -D
3. 配置webpack.config.js

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 +   plugins: [
 +      new HtmlWebpackPlugin({
 +          title: 'Output Management'
 +      })
 +  ],
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development'
};
複製程式碼
  1. 執行npm run build可以看到在dist下面生成了相應的html和js檔案，並且js插入了html檔案

二、cleanup-webpack-plugin

該外掛是用來刪除dist檔案下所有的檔案的，不必像上面第一步那樣來手動清理
1.安裝 npm i clean-webpack-plugin -D
2.向下這樣配置webpack.config.js就可以了

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin =require('clean-webpack-plugin');

module.exports = {
    plugins: [
+       new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        })
    ],
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development'
};
複製程式碼

相關文章