Webpack安裝配置及打包詳細過程

打包步驟

接下來詳細介紹webpack安裝配置及打包的詳細過程

 全局安裝webpack

運行CMD，安裝命令如下所示，其中， -g是全局安裝，並移除安裝了 webpack和webpack-cli

npm install webpack webpack-cli –g

創建本地項目文件夾

創建項目本地文件夾，如“D:\TestWebpack”，在CMD命令窗中分別輸入如下命令，切換到該目錄

D:                 //切換到D盤
cd D:\TestWebpack //切換到項目目錄

本地安裝webpack

輸入如下命令，在項目目錄中安裝webpack，其中，--save-dev是本地安裝

npm install webpack webpack-cli --save-dev

查看webpack 版本

輸入如下命令，若出現版本號，說明安裝成功。

webpack -v

創建package.json文件

輸入如下命令，將在項目目錄中自動生成package.json文件

npm init -y

配置打包目錄

在項目目錄下，新建config文件夾，用於存放配置文件；src文件夾，用於存放源碼；out文件夾，用於存放打包生成文件，具體如下圖所示。

 添加webpack.config.js文件

在config文件夾中添加webpack.config.js文件，並添加如下代碼：

const path=require('path'); //調用node.js中的路徑
module.exports={
    entry:{
        index:'./src/js/index.js' //需要打包的文件
    },
    output:{
        filename:'[name].js',    //輸入的文件名是什么，生成的文件名也是什么
        path:path.resolve(__dirname,'../out') //指定生成的文件目錄
    },
    mode:"development"    //開發模式，沒有對js等文件壓縮，默認生成的是壓縮文件
}

運行webpack

在cmd命令窗體中，輸入如下命令，運行成功后，在out目錄中會生成打包后的index.js

webpack --config config/webpack.config.js

 配置package.json

每次輸入命令webpack --config config/webpack.config.js，太長，且非常不方便，此時我們可以在package.json文件中配置，如下所示：

{
  "name": "TestWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config config/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
  }
}

配置完成后，我們輸入的如下命令，可以直接打包。

npm run start

JS緩存問題的處理

通過哈希值解決JS緩存問題(在沒有修改JS要打包的內容時，不會重新打包一個JS文件)，修改webpack.config.js文件，具體代碼如下：

const path=require('path');
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',//增加8位的哈希值
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
}

安裝webpack插件clean-webpack-plugin

通過clean-webpack-plugin插件刪除輸出目中之前舊的文件。

安裝命令

npm install --save-dev clean-webpack-plugin

用法一

const path=require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
    plugins:[
        new CleanWebpackPlugin()        
    ]
}

用法二

const path=require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin ;
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
    plugins:[
        new CleanWebpackPlugin()        
    ]
}

 配置完后，我們再次運行npm run start，此時out目錄中，只有一個新生成的js文件，如下圖所示。