webpack快速入門

本文轉載自查看原文 2020-08-14 18:50 456 webpack

8.webpack

Webpack 是一個前端資源的打包工具，它可以將js、image、css等資源當成一個模塊進行打包。

中文官方網站：https://www.webpackjs.com/

官網給出的解釋：

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

為什么需要打包？

將許多碎小文件打包成一個整體，減少單頁面內的衍生請求次數，提高網站效率。
將ES6的高級語法進行轉換編譯，以兼容老版本的瀏覽器。
將代碼打包的同時進行混淆，提高代碼的安全性。

8.1.安裝

webpack支持全局安裝和本地安裝，官方推薦是本地安裝，我們按照官方的來。

安裝最新版本webpack，輸入命令：npm install --save-dev webpack

webpack 4+ 版本，你還需要安裝 CLI ，輸入命令：npm install webpack webpack-cli --save-dev

此時，我們注意下項目中文件夾下，會有一個package.json文件。（其實早就有了）

打開文件，可以看到我們之前用npm安裝過的文件都會出現在這里：

8.2.核心概念

學習Webpack，你需要先理解四個核心概念：

入口(entry)

webpack打包的起點，可以有一個或多個，一般是js文件。webpack會從啟點文件開始，尋找啟點直接或間接依賴的其它所有的依賴，包括JS、CSS、圖片資源等，作為將來打包的原始數據
輸出(output)

出口一般包含兩個屬性：path和filename。用來告訴webpack打包的目標文件夾，以及文件的名稱。目的地也可以有多個。
加載器（loader）

webpack本身只識別Js文件，如果要加載非JS文件，必須指定一些額外的加載器（loader），例如css-loader。然后將這些文件轉為webpack能處理的有效模塊，最后利用webpack的打包能力去處理。
插件(plugins)

插件可以擴展webpack的功能，讓webpack不僅僅是完成打包，甚至各種更復雜的功能，或者是對打包功能進行優化、壓縮，提高效率。

8.3.編寫webpack配置

接下來，我們編寫一個webpack的配置，來指定一些打包的配置項。配置文件的名稱，默認就是webpack.config.js，我們放到hello-vue的根目錄：

配置文件中就是要指定上面說的四個核心概念，入口、出口、加載器、插件。

不過，加載器和插件是可選的。我們先編寫入口和出口

8.3.1.入口entry

webpack打包的啟點，可以有一個或多個，一般是js文件。現在思考一下我們有沒有一個入口？貌似沒有，我們所有的東西都集中在index.html，不是一個js，那怎么辦？

我們新建一個js，把index.html中的部分內容進行集中，然后在index.html中引用這個js不就OK了！

然后把原來index.html中的js代碼全部移動到index.js中

// 使用es6的語法導入js模塊
import Vue from '../node_modules/vue/dist/vue';
import VueRouter from '../node_modules/vue-router/dist/vue-router';
import loginForm from './user/login';
import registerForm from './user/register';

Vue.use(VueRouter);

// 創建vue對象
const router = new VueRouter({
    routes: [ // 編寫路由規則
        // path: 路由請求路徑；component：組件名稱
        {path: "/login", component: loginForm},
        {path: "/register", component: registerForm}
    ]
});
var vm = new Vue({
    el: "#app",
    components: {
        loginForm,
        registerForm
    },
    router
});

原來的index.html中引入了很多其它js，在這里我們使用es6的import語法進行導入。

注意，要使用import，就需要在login.js和register.js中添加export導出語句：

const loginForm={
    template: '\
       <div>\
            <h2>登陸頁</h2>\
            用戶名：<input type="text"><br>\
            密&emsp;碼：<input type="password">\
       </div>',
}
export default loginForm;

const registerForm = {
    template:'\
    <div>\
    <h2>注冊頁</h2> \
    用&ensp;戶&ensp;名：<input type="text"><br/>\
    密&emsp;&emsp;碼：<input type="password"><br/>\
    確認密碼：<input type="password"><br/>\
    </div>\
    '
}
export default registerForm;

vue-router使用模塊化加載后，必須增加一句：Vue.use(VueRouter)

這樣，index.js就成了我們整個配置的入口了。

我們在webpack.config.js中添加以下內容：

module.exports={
    entry:'./src/index.js',  //指定打包的入口文件
}

8.3.2.出口output

出口，就是輸出的目的地。一般我們會用一個dist目錄，作為打包輸出的文件夾：

然后，編寫webpack.config.js，添加出口配置：

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 輸出的目錄，__dirname是相對於webpack.config.js配置文件的絕對路徑
        path : __dirname+'/dist',  
        filename:'build.js'	 //輸出的js文件名
    }
}

8.4.執行打包

在控制台輸入以下命令：

npx webpack --config webpack.config.js

隨后，查看dist目錄：

嘗試打開build.js，你根本看不懂：

所有的js合並為1個，並且對變量名進行了隨機打亂，這樣就起到了壓縮、混淆的作用。

8.5.測試運行

在index.html中引入剛剛生成的build.js文件，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--router-link來指定跳轉的路徑-->
        <span><router-link to="/login">登錄</router-link></span>
        <span><router-link to="/register">注冊</router-link></span>
        <hr/>
        <div>
            <!--vue-router的錨點-->
            <router-view></router-view>
        </div>
    </div>
    <script src="../dist/build.js"></script>
</body>
</html>

然后運行：

8.6.打包CSS

我們來編寫一段CSS代碼，對index的樣式做一些美化：

內容：

#app a{
    display: inline-block;
    width: 150px;
    line-height: 30px;
    background-color: dodgerblue;
    color: white;
    font-size: 16px;
    text-decoration: none;
}
#app a:hover{
    background-color: whitesmoke;
    color: dodgerblue;
}
#app div{
    width: 300px;
    height: 150px;
}
#app{
    width: 305px;
    border: 1px solid dodgerblue;
}

8.6.1.安裝加載器

前面說過，webpack默認只支持js加載。要加載CSS文件，必須安裝加載器：

命令：npm install style-loader css-loader --save-dev

此時，在package.json中能看到新安裝的：

8.6.3.index.js引入css文件

因為入口在index.js，因此css文件也要在這里引入。依然使用ES6 的模塊語法：

import './css/main.css'

8.6.4.配置加載器

在webpack.config.js配置文件中配置css的加載器

module.exports = {
    entry: './src/main.js',  //指定打包的入口文件
    output: {
        path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑
        filename: 'build.js'  //輸出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 通過正則表達式匹配所有以.css后綴的文件
                use: [ // 要使用的加載器，這兩個順序一定不要亂
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

8.6.5.重新打包

再次輸入打包指令：npx webpack --config webpack.config.js

效果：(如果之前訪問過,最好先關閉瀏覽器)

8.7.script腳本

我們每次使用npm安裝，都會在package.json中留下痕跡，事實上，package.json中不僅可以記錄安裝的內容，還可編寫腳本，讓我們運行命令更加快捷。

我們可以把webpack的命令編入其中：

以后，如果要打包，就可以直接輸入：npm run build即可。

npm run ：執行npm腳本，后面跟的是配置腳本的名稱build

8.8.打包HTML

之前的打包過程中，除了HTML文件外的其它文件都被打包了，當在線上部署時，我們還得自己復制HTML到dist，然后手動添加生成的js到HTML中，這非常不友好。

webpack中的一個插件：html-webpack-plugin，可以解決這個問題。

1）安裝插件：npm install --save-dev html-webpack-plugin

還需要在webpack.config.js中添加插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',  //指定打包的入口文件
    output: {
        path: __dirname + '/dist',  // 注意：__dirname表示webpack.config.js所在目錄的絕對路徑
        filename: 'build.js'		   //輸出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 通過正則表達式匹配所有以.css后綴的文件
                use: [ // 要使用的加載器，這兩個順序一定不要亂
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: '首頁',  //生成的頁面標題<head><title>首頁</title></head>
            filename: 'index.html', // dist目錄下生成的文件名
            template: './src/index.html' // 我們原來的index.html，作為模板
        })
    ]
}

2）將原來HTML中的引入js代碼刪除：

3）再次打包：npm run build

4）查看dist目錄：

打開index.html，發現已經自動添加了當前目錄下的build.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <!--router-link來指定跳轉的路徑-->
        <span><router-link to="/login">登錄</router-link></span>
        <span><router-link to="/register">注冊</router-link></span>
        <div>
            <!--vue-router的錨點-->
            <router-view></router-view>
        </div>
    </div>
<script type="text/javascript" src="build.js"></script></body>
</html>

8.9.熱更新的web服務

剛才的案例中，每次修改任何js或css內容，都必須重新打包，非常麻煩。

webpack給我們提供了一個插件，可以幫我們運行一個web服務，加載頁面內容，並且修改js(css,html也可以)后不需要重新加載就能看到最新結果：

1）安裝插件：npm install webpack-dev-server --save-dev

2）添加啟動腳本

在package.json中配置script

  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 8080 --host 127.0.0.1"
  },

--inline：自動刷新

--hot：熱加載

--port：指定端口

--open：自動在默認瀏覽器打開

--host：可以指定服務器的 ip，不指定則為127.0.0.1

3）運行腳本：npm run dev

4）效果：