使用webpack包管理工具

阿新 • • 發佈：2018-11-10

一 : 最簡單的使用webpack的方法

一、全域性安裝 webpack-cli 腳手架

npm install webpack-cli -g

二、新建一個專案wp，並在wp目錄下初始化一個package.json檔案。

npm init -y

三、安裝webpack到專案中

將webpack加入到pageage.json配製檔案中，使用以下命令：
$ npm install --save-dev webpack
1

此時再看package.json檔案，對比package.json剛剛建立時，新增加了一段程式碼。

在wp目錄下新建一個src目錄，並在該目錄下新建一個index.js 作為入口檔案
這裡寫圖片描述

webpack4.x 給我們提供了兩種打包模式：

development 為開發模式
production 為生產模式，打包出的 main.js 程式碼自動壓縮

我們可以直接使用命令 webpack --mode development 進行開發模式打包
這裡寫圖片描述

我們使用生產模式webpack --mode production 打包

此時程式碼已經被壓縮。

不管哪種模式，我們每次打包都使用 webpack --mode development 或者 webpack --mode production 都有點麻煩，我們可以修改下package.json檔案裡面的 scripts 屬性：

"dev": "webpack --mode development", "build: "webpack --mode production"

最後我們就可以使用 npm run dev 進行開發模式打包，使用 npm run build

進行生產模式打包。

webpack.config.js

const path = require("path");
module.exports = {
    entry:  ["./src/index.js","./src/index2.js" ], //入口檔案，若不配置webpack4將自動查詢src目錄下的index.js檔案
    output: {
        filename: "[name].js",//輸出檔名，[name]表示入口檔案js名
        path: path.join(__dirname, "dist")//輸出檔案路徑
    }
}

package.json

{
  "name": "testWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.22.0"
  }
}

二 : webpack打包進階

前言：

webpack4出了以後，一些外掛變化很大，和之前的版本使用方式不一樣，新手入坑，本篇將介紹如何從一開始配置webpack4的開發版本，對css，js進行編譯打包合併生成md5，CSS中的圖片處理，js自動注入html頁，刪除指定檔案，提取公共檔案，熱更新等等。

安裝

//全域性安裝
npm install -g webpack webpack-cli

建立資料夾初始化

 //建立資料夾

mkdir webpack4demo

//進入

cd webpack4demo

//初始化

npm init -y

建立資料夾scripts 裡面建立index.js檔案

index.js

 const s=()=>{

console.log('s init')

}

s()

建立webpack.config.js檔案

webpack.config.js

 const path = require("path");

module.exports = {

entry: {

index: "./scripts/index.js" //入口檔案，若不配置webpack4將自動查詢src目錄下的index.js檔案

},

output: {

filename: "[name].bundle.js",//輸出檔名，[name]表示入口檔案js名

path: path.join(__dirname, "dist")//輸出檔案路徑

}

}

執行webpack --mode development將會生成dist/index.bundle.js

建立index.html，並引入js

 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>$Title$</title>

</head>

<body>

$END$

</body>

<script src="./dist/index.bundle.js"></script>

</html>

開啟瀏覽器將會看到之前設定的js檔案生效

對css，js進行編譯打包合併生成md5

建立a.js，c.js，a.css，更改index.js

a.js

 import acss from './a.css'

import c from './c.js'

const a={

init(){

console.log("a init bbbaaa")

},

cinit(){

c.init()

}

}

export default a;

c.js

 const c={

init(){

console.log("ccccc")

}

}

export default c;

a.css

 body{

background-color: #6b0392;

}

index.js

 import a from './a.js'

import c from './c.js'

const s=()=>{

a.init()

a.cinit()

c.init()

console.log('s init')

}

s()

配置webpack.config.js檔案

 const path = require("path");

module.exports = {

entry: {

index: "./scripts/index.js"

},

output: {

filename: "[name].bundle.[hash].js",//[hash]會在後面生成隨機hash值

path: path.join(__dirname, "dist")

},

module: { // 處理對應模組

rules: [

{

test: /\.css$/,

use: [ 'style-loader', 'css-loader' ]//處理css

}

]

},

}

安裝style-loader， css-loader

npm install style-loader css-loader --save-dev

執行webpack --mode development將會看到一個帶md5值得js檔案，將他引入html中

CSS中的圖片處理

安裝url-loader, file-loader

npm install url-loader file-loader --save-dev

修改a.css 將一張圖片放到scripts目錄

body{
background-image: url("./timg.jpg");
background-color: #a748ca;
}

配置webpack.config.js檔案

module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
outputPath:'images/',//輸出到images資料夾
limit:500 //是把小於500B的檔案打成Base64的格式，寫入JS
}
}]
}
]
},

執行webpack --mode development將會看到dist中有一個images資料夾中有一張圖片，開啟index.html

js自動注入html檔案

使用外掛html-webpack-plugin，可以將生成的js自動引入html頁面，不用手動新增

//安裝html-webpack-plugin
npm install html-webpack-plugin --save-dev
//安裝webpack webpack-cli
npm install webpack webpack-cli --save-dev

配置webpack.config.js檔案

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
module.exports = {
entry: {
index: "./scripts/index.js"
},
output: {
filename: "[name].bundle.[hash].js",
path: path.join(__dirname, "dist")
},
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [// 對應的外掛
new HtmlWebpackPlugin({ //配置
filename: 'index.html',//輸出檔名
template: './index.html',//以當前目錄下的index.html檔案為模板生成dist/index.html檔案
}),
]
}

執行webpack --mode development 記得要講之前手動引入的script刪除，便可以看到dist那裡自動生成一個index.html，開啟便可以看到。

刪除指定檔案

使用外掛clean-webpack-plugin，刪除指定檔案，更多配置，檢視clean-webpack-plugin

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

配置webpack.config.js檔案

const CleanWebpackPlugin = require('clean-webpack-plugin');//引入
plugins: [// 對應的外掛
new HtmlWebpackPlugin({ //配置
filename: 'index.html',//輸出檔名
template: './index.html',//以當前目錄下的index.html檔案為模板生成dist/index.html檔案
}),
new CleanWebpackPlugin(['dist']), //傳入陣列,指定要刪除的目錄
]

執行webpack --mode development，可以看到dist目錄被刪除，又生成一個新的dist，之前的js檔案已經被刪除。

提取公共檔案

我們可看到a.js和index.js都引入了c.js檔案，為什麼要提取公共程式碼，簡單來說，就是減少程式碼冗餘，提高載入速度。和之前的webpack配置不一樣：

//之前配置
// new webpack.optimize.SplitChunksPlugin({
// name: 'common', // 如果還要提取公共程式碼,在新建一個例項
// minChunks: 2, //重複兩次之後就提取出來
// chunks: ['index', 'a'] // 指定提取範圍
// }),
//現在配置
optimization: {
splitChunks: {
cacheGroups: {
commons: { // 抽離自己寫的公共程式碼
chunks: "initial",
name: "common", // 打包後的檔名，任意命名
minChunks: 2,//最小引用2次
minSize: 0 // 只要超出0位元組就生成一個新包
},
vendor: { // 抽離第三方外掛
test: /node_modules/, // 指定是node_modules下的第三方包
chunks: 'initial',
name: 'vendor', // 打包後的檔名，任意命名
// 設定優先順序，防止和自定義的公共程式碼提取時被覆蓋，不進行打包
priority: 10
},
}
}
},

下載jq npm install jquery --save 在a.js，index.js引用 import $ from 'jquery' 輸出$

生成3個js檔案，執行webpack --mode development

熱更新，自動重新整理

我們將用到webpack-dev-serve，webpack-dev-server就是一個基於Node.js和webpack的一個小型伺服器，它有強大的自動重新整理和熱替換功能。

安裝webpack-dev-serve

npm install webpack-dev-serve --save-dev

配置webpack.config.js檔案

const webpack = require("webpack");
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
}),
new CleanWebpackPlugin(['dist']), //傳入陣列,指定要刪除的目錄
// 熱更新，熱更新不是重新整理
new webpack.HotModuleReplacementPlugin()
],
devServer: {//配置此靜態檔案伺服器，可以用來預覽打包後項目
inline:true,//打包後加入一個websocket客戶端
hot:true,//熱載入
contentBase: path.resolve(__dirname, 'dist'),//開發服務執行時的檔案根目錄
host: 'localhost',//主機地址
port: 9090,//埠號
compress: true//開發伺服器是否啟動gzip等壓縮
},

配置package.json

"scripts": {
"dev": "webpack-dev-server --mode development"
},

執行npm run dev 訪問 http://localhost:9090/

隨便修改任一檔案便會自動重新整理網站顯示修改相應內容。

總結：

webpack4還有很多很多配置，例如css的拆分呀，less sass配置呀，js編譯es6呀，多入口配置呀，生產環境配置，js沒有使用的模組自動檢測剝離等等，只能等下次有空在總結，感謝大家的觀看，新手入坑，歡迎指出錯誤的地方。

使用webpack包管理工具

一 : 最簡單的使用webpack的方法

二 : webpack打包進階

前言：

安裝

建立資料夾初始化

建立資料夾scripts 裡面建立index.js檔案

建立webpack.config.js檔案

執行webpack --mode development將會生成dist/index.bundle.js

建立index.html，並引入js

開啟瀏覽器將會看到之前設定的js檔案生效

對css，js進行編譯打包合併生成md5

建立a.js，c.js，a.css，更改index.js

配置webpack.config.js檔案

安裝style-loader， css-loader

CSS中的圖片處理

安裝url-loader, file-loader

配置webpack.config.js檔案

js自動注入html檔案

使用外掛html-webpack-plugin，可以將生成的js自動引入html頁面，不用手動新增

配置webpack.config.js檔案

刪除指定檔案

提取公共檔案

熱更新，自動重新整理

配置webpack.config.js檔案

配置package.json

總結：

相關推薦