開始的開始

步入前端已經一年多了，真心的體會到前端世界變化莫測，從jquery到vue，也算經歷了一場大前端的變革。而在這幾年，webapck的呼聲越來越高。遠超gulp，grunt等打包工具。平時使用vue-cli時用得biu順，等到自己搭的時候就有點捉襟見肘了。（本次使用的是webpack4以上，小心踩坑，注意腳下）

專案的初始化

使用npm init進行初始化操作 ，初始化介面會要求你輸入對應的配置資訊

package name: (demo-cli-blog)  //專案包名
version: (1.0.0)        //專案的版本
description: test       //專案的具體描述
entry point: (index.js) //專案的入口檔案
test command:           //測試指令，預設為test
git repository:         //git的地址
keywords:               //關鍵詞
author: talen           //作者資訊
license: (ISC)          //證書號
 

填寫完成後，檔案目錄裡多出了一個json檔案package.json：

{
  "name": "demo-cli-blog",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "talen",
  "license": "ISC"
}

建立基本目錄

在demo-cli-blog檔案下建立如下目錄：

安裝webpack

如果查詢不到，就說明你可能沒安裝webpack全域性環境，通過npm安裝webpack

npm install webpack -g

同時webpack 4以上還需要安裝webpack-cli（可以幫你拉取配置，過渡版本遷移）

npm install webpack-cli -g

安裝完webpack和webpack-cli後，就可以開始配置webpack.config.js檔案了。

配置webpack檔案

• 首先配置入口檔案和出口檔案

const config= {
  entry: {                        //入口檔案（這是多頁面配置）

      a:'./src/page1/a.js',   //index頁面入口
      b:'./src/page2/b.js'   //page1頁面入口


  },
  output: {                               //出口檔案配置
      filename: './[name]/[name].js',     //出口檔案存放位置，[name]代表塊級檔案流的名字，如入口檔案中的a,b，最終會[name]的值就會變成a,b。目的是為了讓每個頁面在其單獨的資料夾內
      path: path.resolve(__dirname, 'dist'), // 新建dist資料夾存放的位置，__dirname表示當前環境下的絕對路徑
  },
 

• 出口和入口檔案配置完畢後，配置打包需要的外掛和loader，在此之前應該使用npm管理工具在當前目錄下安裝這些外掛和loader。比如：webpack,webpack-cli(當前目錄也需要安裝webpack，webpack-cli),html-webpack-plugin,extract-text-webpack-plugin,'clean-webpack-plugin,style-loader,css-loader,url-loader,file-loader,html-loader等等(外掛安裝所需包請自行百度，谷歌)……

注意： 

1、注意在webpack4.6.0裡面 `extract-text-webpack-plugin`由於版本支援的問題，會報

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead  錯誤，

所以需要 ` npm install -s [email protected]`安裝與webpack4以上適應的版本，或者可以使用`mini-css-extract-plugin`。 

2、 webpack只會到打包js檔案，所以css需要引入js才能打包 

webpack.config.js全部程式碼

const path = require('path');//引入node中的path模組
const webpack = require("webpack");//引入webpack
const HtmlWebpackPlugin = require("html-webpack-plugin");//引入html-webpack-plugin外掛,作用是新增模板到編譯完成後的dist的檔案裡面
const CleanWebpackPlugin = require("clean-webpack-plugin");//引入clean-webpack-plugin外掛，作用是清除dist檔案及下的內容，因為每次編譯完成後都會有一個dist資料夾存放靜態檔案，所以需要清除上次的dist檔案
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");//引入extract-text-webpack-plugin外掛，作用是把css檔案單獨存為一個檔案，如果不用外掛，css會以style標籤的方式插入html中


const config= {
  entry: {                        //入口檔案（這是多頁面配置）

      a:'./src/page1/a.js',   //index頁面入口
      b:'./src/page2/b.js'   //page1頁面入口


  },
  output: {                               //出口檔案配置
      filename: './[name]/[name].js',     //出口檔案存放位置，[name]代表塊級檔案流的名字，如入口檔案中的a,b，最終會[name]的值就會變成a,b。目的是為了讓每個頁面在其單獨的資料夾內
      path: path.resolve(__dirname, 'dist'), // 新建dist資料夾存放的位置，__dirname表示當前環境下的絕對路徑
  },



  plugins:[                                   //webpack外掛部分

      //分割css外掛
      new ExtractTextWebpackPlugin({

          filename:"[name]/[name].css",//制定編譯後的目錄
          allChunks:true,//把分割的塊分別打包

      }),

      //配置html模板，因為是多頁面，所以需配置多個模板
      new HtmlWebpackPlugin({

          title:'測試',//html標題
          filename:'./a/a.html',//檔案目錄名
          template:'./src/page1/a.html',//檔案模板目錄
          hash:true,//是否新增hash值
          chunks:['a'],//模板需要引用的js塊，vendors是定義的公共塊，index是引用的自己編寫的塊

      }),

      new HtmlWebpackPlugin({

          title:'頁面一',
          filename:'./b/b.html',
          template:'./src/page2/b.html',
          hash:true,
          chunks:['b'],

      }),


      // 每次清空dist目錄
      new CleanWebpackPlugin(['dist']),

  ],

  module:{

      rules:[

          {test:/\.css/,use:ExtractTextWebpackPlugin.extract({use:['css-loader']},)},//帶css的css編譯
          {test:/\.scss/,use:ExtractTextWebpackPlugin.extract({fallback:"style-loader",use:['css-loader','sass-loader']},)},//帶scss的css編譯
          {test:/\.(svg|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$/,use:[{loader:'file-loader',options: {outputPath: 'assets/'}}]},//圖片和字型載入
          {test: /\.png$/, use: {loader:"url-loader",options:{mimetype:"image/png",limit:"4096"}}},//如果有png格式的圖片，超過4M直接轉化為base64格式
          {test: /\.html$/, use: {loader:'html-loader',  options: {           //打包html檔案
                      minimize: true, //是否打包為最小值
                      removeComments: true,//是否移除註釋
                      collapseWhitespace: true,//是否合併空格
                  }}},


      ],


  },


};


module.exports = config

打包後目錄如下：

直接訪問dist目錄效果

第一次webpack的嘗試就到此為止，敬請期待。。。