在MVVM框架大行其道的時代，考慮Mpa來實作一個應用實在有些落伍，但是不免還是有一些應用場景，正如 Webpack構建多頁應用Mpa(一) 提到：

如果團隊沒有專職前端，并且專案預留時間也很緊張，沒足夠時間去系統學習工程化Vue專案，但是卻也想讓html、css、js這些代碼被打包壓縮，盡可能減少檔案大小，并且想讓專案匯出的檔案結構盡可能清晰、規整；

一、概要

1、最終要達到的目標是

源代碼統一存放在src目錄下，打包后的html、css 、js等檔案統一存放在dist目錄
壓縮html、css 、js代碼
html代碼中靜態資源，如js、css、jpg、gif、ttf等自動檢測打包到dist/static/image、dist/static/font、dist/static/js

2、改用淘寶鏡像倉

直接運行npm i xxx -S，可能安裝會很慢甚至安裝失敗；可以修改鏡像地址，提供多種方式：

通過.npmrc修改鏡像
在根目錄下創建.npmrc組態檔，并輸入如下內容：
執行命令修改配置
npm config set registry https://registry.npm.taobao.org
安裝cnpm，支持全部npm命令，
npm install cnpm -g --registry=https://registry.npm.taobao.org

3、搭建本地除錯環境

搭建本地服務器方法比較多，可以使用iis、wamp、phpstudy等；node環境下，我們可以使用http-server來搭建，

全域安裝，npm i -g http-server
執行命令列：http-server dist

在正式的開發程序中，我們可以開啟webpack自帶的devServer做熱更新除錯，熱更新除錯不會時時匯出檔案到dist目錄，而是把最新的檔案更新到記憶體，這里為了方便觀察，我們采用http-server，

4、注意

在整個實作程序中，經常會出現打包報錯的情形，很多是由于各個插件版本差異導致，所以務必安裝教程中指定的插件版本，避免不必要的麻煩；

二、創建Mpa

下面我們開始一步步實作，let’s go…

1、新建一個簡單的webpack應用

進入Mpa專案目錄，初始化專案npm init
根目錄新建一個檔案夾Mpa，進入后運行以下命令：
npm i -D webpack@4.46.0
npm i -D webpack-cli@4.7.0
根目錄創建src目錄，并在目錄下新建index.js檔案，檔案內容如下：
console.log("hello world");
根目錄創建webpack.config.js檔案，配置內容如下：
module.exports = { mode: "development" };
執行打包命令npx webpack，會在專案根目錄生成dist目錄，并生成main.js檔案

檔案結構如下：
一個簡單的webpack專案檔案目錄結構

修改打包命令
修改package.json，在scripts欄位添加一行配置，執行npm run dev來打包，效果等同于npx webpack，

代碼如下：

...

  "scripts": {
    "dev": "npx webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

瀏覽器打開 http://127.0.0.1:8080/

2、支持自動生成html頁面

不光要支持自動生成dist/main.js檔案，還要支持將dist/main.js插入到對應的html頁面，這里借助html-webpack-plugin插件；

安裝插件：
npm i -D html-webpack-plugin@4.3.0
在src目錄下新建index.html

src/index.html 代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是首頁</title>
</head>
<body>
    首頁
</body>
</html>

配置webpack.config.js
分別設定 入口檔案（entry）、出口檔案（output）、插件（plugins），需要注意的是，在組態檔路徑的時候，如果采用相對路徑，默認是在根目錄，
entry： 設定入口檔案是./src/index.js
output.path： 設定匯出最侄訓出js檔案的路徑
output.filename： 設定最侄訓出js檔案的名稱
plugins： 插件清單，是陣列型別，

webpack.config.js代碼如下：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "dist")
    },
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            title: "首頁",							//匯出html檔案的title
            filename: "./index.html",		//匯出的檔案名
            template: "./src/index.html"	//匯出檔案的模板
        })
    ]
};

執行打包npx webpack，自動生成dist檔案件，里面有index.js、index.html兩個檔案；
檔案結構如圖：

我們看到dist目錄中自動生成了index.html檔案，并且將最終生成chunk（自動生成的index.js檔案）引入了body標簽底部，<script src="index.js"></script>；

dist/index.html 代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是首頁</title>
</head>
<body>
    首頁
<script src="index.js"></script></body>
</html>

打包時自動清理dist目錄
安裝清理插件：npm i -D clean-webpack-plugin@3.0.0，修改output匯出檔案名稱為main.js，執行打包npx webpack，我們看到dist目錄下之前的index.js檔案被自動洗掉了，

生成檔案如圖：
在這里插入圖片描述
webpack.config.js 代碼如下：

...
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new CleanWebpackPlugin(),
        ...
    ]
};

3、識別css樣式檔案

識別css、less、sass等樣式檔案時，我們需要使用對應的xxx-loader，
loader是干什么用的，webpack官網給的解答是：webpack 支持使用 loader 對檔案進行預處理，你可以構建包括 JavaScript 在內的任何靜態資源，并且可以使用 Node.js 輕松撰寫自己的 loader，

安裝npm i -D css-loader@5.2.6
安裝npm i -D style-loader@2.0.0
webpack.config.js添加css-loader、style-loader

webpack.config.js 代碼如下：

...
module.exports = {
...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader","css-loader"]
            }
        ]
    },
...
};

新建src/index.css，并在index.js頭部引入import "./index.css";

src/index.js 代碼如下：

import "./index.css";
console.log("hello world");

執行npm run dev打包后，重繪http://127.0.0.1:8080/，我們看到樣式被內嵌到了head標簽中，如圖：

4、將css樣式檔案單獨打包

使用css-loader和style-loader之后，并不是想要的效果，最好是把引入的css也單獨打包出來，然后在dist/index.html引入，這需要使用mini-css-extract-plugin插件；

安裝npm i -D mini-css-extract-plugin@1.6.0
配置webpack.config.js

webpack.config.js 代碼如下：

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },
    plugins: [
		...
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[name].css"
        })
    ]
};

執行npm run dev打包后，重繪http://127.0.0.1:8080/，我們看到css檔案被引入到了head標簽中，如圖：

三、總結

到這里，實作了整個專案中的基礎功能：
1、創建頁面必須的html、css、js檔案，打包時自動將chunk和css引入到html檔案body標簽底部
2、打包時自動清除dist檔案夾
3、使用http-server和npm run dev，搭建簡易的除錯環境

后面章節，將實作如下功能：
1、css兼容
2、js語法兼容、es6新特性加絨
3、多頁面架構搭建
4、自動打包html中靜態資源

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/286264.html

標籤：其他

上一篇：springcloud筆記四hystrix

下一篇：【論文閱讀】Modeling Multi-turn Conversation with Deep Utterance Aggregation

Webpack構建多頁應用Mpa(二)：實作基礎框架，單獨打包樣式檔案