《webpack的打包開發》

一張圖來表示小編對於webpack的認知：

同時也在實戰中對於webpack進行了驗證：

/*
 * @Descripttion: 
 * @version: v1.0
 * @Author: linda
 * @Date: 2020-03-10 17:31:43
 * @LastEditors: linda
 * @LastEditTime: 2020-03-10 22:05:29
 */
const path = require('path'); //node自帶的路徑模塊
// 此插件的導入使得單頁應用成爲現實，也體現了自動化
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 全局導出，讓所有的文件都能訪問到當前的配置信息
module.exports = {
  // 設置環境:開發-devlopment；生產-production
  // 在dev下，打包後的代碼格式化，方便閱讀和調試
  // 在prod下，打包後的代碼簡化，不易閱讀
  mode: 'development',
  // 入口文件(要打包的文件信息) string array object
  // entry: './index.js', //string
  // entry: ['./app/common.js', './app/index.js', './app/list.js'], //array
  entry: {
    common: './app/common.js',
    index: ['./app/index.js', './app/list.js']
  },
  // 出口文件（要輸出打包的文件信息）
  output: {
    /*
     *output.path爲absolute path
     *webpack設計的人性化
     *如果爲相對路徑，在一個項目中可能會面臨：
     *path: './1/2/3/4/dist'
     *自動化找到輸出文件路徑，引入node自帶的路徑模塊
     *const path = require('path');
     */
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  // 插件-在打包後的文件中包含html文件，單頁應用中的單頁
  plugins: [
    // public中有兩個單頁模板，那用哪個呢？用template來進行設置
    new HtmlWebpackPlugin({
      // 如果要使用title改變項目名稱
      // 第一，在webpack.config.js中設置修改後的
      // 第二，要在首頁模板中
      title: '項目名稱改變',
      template: './public/index.html',
      // filename可以修改首頁文件名稱
      filename: 'app.html',
      // inject決定js資源存放的位置是在body還是在head，默認是存放在body中的
      // 類型爲boolean或者string
      // string: 'body' || ''head
      // 如果爲false，則在html中不引入js資源
      inject: true,
      minify: {
        collapseWhitespace: true
      },
      // hash默認爲false，爲true時，打包後的js文件名稱用hash值表示，進行緩存，提高效率
      hash: true,
      // chunks是選擇加載entry入口文件
      chunks: [index],
      // excludeChunks選擇不加載entry入口的某些文件
      excludeChunks: [common]
    })
  ]
}

•  插件html-webpack-plugin使得工程自動化，同時也是實現單頁應用的重要插件~
• title能改變項目的名稱，要想實現此效果，需要兩步配置：

1. webpack.config.js---title: ''
2. index.html---<title><%= htmlWebpackPlugin.options.title %></title>

• npm run build構建打包除了相應的基礎設置外，還需要在package.json中配置 

{
  "name": "webpack-play",
  "version": "1.0.0",
  "description": "this is a demo of webpack",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"  //npm run build
  },
  "author": "linda",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}