Vue-webpack打包教學

webpack

1.建立專案並在終端初始化

npm init -y

在專案目錄下回生成一個package.json檔案

2.在專案目錄下建立src資料夾，在src目錄下建立index.html檔案和index.js檔案

index.html內容為：

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

3.在終端安裝jQuery

npm install jquery -S
//npm i jquery	 建議這樣寫

會在專案目錄下生成一個package-lock.json檔案和node_modules資料夾（這個資料夾可以刪掉，後續需要的話可以重新下載，命令：npm i）

4.向index.js填充內容，並實現功能

匯入jQuery

import $ from "jquery"

index.js內容

import $ from "jquery";
$(function () {
    $("li:odd").css("background", "pink");
    $("li:even").css("background", "orange");
})

在index.html內匯入index.js

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

src路徑按照自己建立的路徑為準

瀏覽器報錯：

Uncaught SyntaxError: Cannot use import statement outside a module

安裝webpack的原因：

因為**import $ from 「jquery」**是ES6的語法程式碼，瀏覽器存在相容性問題，所以需要安裝webpack，將高版本的語法程式設計瀏覽器可以識別的語法，webpack只能打包js檔案

安裝webpack步驟：

1.在終端輸入命令：

npm install webpack webpack-cli -D
//若有報錯就試試把-D改為-g

2.在專案根目錄下建立一個webpack.config.js的組態檔來設定webpack。

向webpack.config.js新增內容：

module.exports = {
	mode:"development",
}

mode設定的是專案的編譯模式，可以設定的兩個值：

development（開發模式）：表示專案處於開發階段，不會進行壓縮和混淆，打包速度會快一些

production（釋出模式）：表示專案處於釋出階段，會進行壓縮和混淆，打包速度會慢一些

3.向專案目錄下的package.json檔案新增執行指令碼dev:

"scripts":{
	"dev":"webpack"
}

這個dev是自定義命名的

4.執行dev命令進行專案打包

在終端輸入命令,將會啟動webpack進行專案打包

這裡的dev是第三步裡面的dev，第三步命名什麼這裡的就是什麼

npm run dev

成功後會在專案目錄下成成一個dist資料夾，資料夾下有一個main.js檔案

在index.html中修改匯入的js檔案

<script src="../dist/main.js"></script>

頁面效果渲染正確

在此之前，修改之後，都要用npm run dev進行打包，打包之後，效果才會改變

設定webpack的打包入口/出口

在webpack 4x中，

會預設將src/index.js作為預設的打包入口js檔案;

會預設將dist/main.js作為預設的打包輸出js檔案;

如果不想使用預設的入口/出口js檔案，可以通過改變webpack.config.js來設定入口/出口的js檔案：

const path = require("path");
module.exports = {
    // development開發模式、production釋出模式
    mode: "development",
    // 設定入口檔案路徑
    entry: path.join(__dirname, "./src/index.js"),
    // 設定出口檔案
    output: {
        // 設定路徑
        path: path.join(__dirname, "./dist"),
        // 設定檔名
        filename: "bundle.js"
    }
}

設定webpack的自動打包

修改js檔案中的程式碼後，需要重新執行命令npm run dev打包webpack,才能生成出口的js檔案

1.安裝自動打包功能的包：webpack-dev-server

在終端輸入：

npm install webpack-dev-server -D

2.修改package.json中的dev指令

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

webpack-dev-server自動打包的輸出檔案（bundle.js），預設放到了伺服器的根目錄下

自動打包完畢後，預設開啟伺服器網頁

解決：在package.json中的dev指令

webpack 5與webpack-dev-server 3 相容性問題

"scripts": {
    "dev": "webpack serve --open Chrome.exe"
  },

在這裡可能會出現：

[webpack-cli] Would you like to install 'webpack-dev-server' package? (That will run 'npm install -D webpack-dev-server') (Y/n)

Y,然後回車就可以了

在終端執行npm run dev後，會自動跳轉到瀏覽器

瀏覽器預設存取的地址為：http://localhost:8080/

3.修改index.html中js檔案的路徑

bundle.js會儲存到記憶體裡面（在根目錄下面），而不是在dist資料夾下面的那個

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

在此之後，修改相關檔案後，儲存即可，不用再執行命令npm run dev，也不用跳轉到瀏覽器去，會自動跟隨儲存更新的

但是這裡一開始瀏覽器開啟的是專案目錄頁面（檔案和資料夾），而不是index.html頁面，需要自行點開src資料夾才開啟index.html頁面

生成預覽頁面——html-webpack-plugin

在記憶體裡面（根目錄）生成一個預覽頁面而不是在本地生成

實現步驟：

1.安裝預設預覽功能的包：html-webpack-plugin

npm install html-webpack-plugin -D

2.修改webpack.config.js檔案：

//導包
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 建立物件
const htmlPlugin = new HtmlWebpackPlugin({
//是鍵值對，用:相連的，而不是用=號，後面加逗號
    // 設定生成預覽頁面的模板檔案
    template: "./src/index.html",
    // 設定生成的預覽頁面名稱
    filename:"index.html",
})
module.exports = {
    ......
    plugins: [htmlPlugin]
}

設定完，npm run dev之後開啟的就是index.html頁面了

webpack中的載入器（loader）

通過loader打包非js模組：在預設情況下，webpack只能打包js檔案，如果下載想要打包非js檔案，需要呼叫loader載入器才能打包

loader載入器包含：

1).less-loader：處理less檔案

2).sass-loader

3).url-loader:打包處理css中與url路徑有關的檔案

4).babel-loader：處理高階js語法的載入器

5).postcss-loader

6).css-loader,style-loader

**注意：**指定多個loader時的順序是固定的，而呼叫loader的順序是從後往前進行呼叫的

安裝style-loader，.css-loader來處理樣式檔案

1.安裝包

在終端輸入

npm install style-loader css-loader -D

2.設定規則：更改webpack.config.js的module中的rules陣列

plugins: [htmlPlugin],		//這是前面新增過的
    module: {
        rules: [{
            // test設定需要匹配的檔案型別，支援正則\.是.,前面的\是解析的意思，$是檔名一定要是.css結尾
            test: /\.css$/,
            // use表示該檔案型別需要呼叫的loader(載入器)
            use: ['style-loader', 'css-loader'],
        }]
    }

在專案目錄下的src資料夾下面建立一個css資料夾，在css資料夾下面建立一個index.css檔案，自行新增內容

在入口檔案index.js中引入（匯入）index.css檔案

import "./css/index.css";

因為匯入的是一個檔案，所以不用from

最後在終端執行npm run dev 命令即可

安裝less，less-loader，來處理less檔案

1.安裝包

npm install less-loader less -D

2.設定規則：更改webpack.config.js的module中的rules陣列

rules: [
            // 這裡是css檔案的設定規則
            {
                // test設定需要匹配的檔案型別，支援正則
                test: /\.css$/,
                // use表示該檔案型別需要呼叫的loader(載入器)
                use: ['style-loader', 'css-loader'],
            },
            // 這裡是less檔案的設定規則
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
            }
        ]

在css資料夾下建立一個index.less檔案，自定義內容為：

ul{
    li{
        color: white;
    }
}

在index.js中匯入index.less檔案

import "./css/index.less";

最後在終端執行npm run dev 命令即可

安裝sass-loader,node-sass處理scss檔案

1.安裝包

npm install sass-loader node-sass -D

這一步可能會失敗會報錯（因為npm是從國外拿資料的），解決方案如下：

解決方案一：

設定全域性映象源：

npm config set sass_binary_site https://npm.taobao.org/mirrrors/node-sass/

然後再重新安裝

npm install sass-loader node-sass -D

解決方案二：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然後再執行命令：

cnpm install sass-loader node-sass --save-dev

解決方案三：

安裝python,安裝目錄必須在C:/Python27

然後執行命令：

cnpm install sass-loader node-sass --save-dev

2.設定規則：更改webpack.config.js的module中的rules陣列

 module: {
        // rules裡面存放的是物件
        rules: [
            // 這裡是css檔案的設定規則
            {
                // test設定需要匹配的檔案型別，支援正則
                test: /\.css$/,
                // use表示該檔案型別需要呼叫的loader(載入器)
                use: ['style-loader', 'css-loader'],
            },
            // 這裡是less檔案的設定規則
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
            // 這裡是scss檔案的設定規則
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            }
        ]
    }

在css資料夾下建立index.scss檔案（字尾名一定是scss，而不是sass），自定義內容：

ul {
    li{
        border: 1px solid blue;
        margin: 10px auto;
    }
}

在index.js中引入index.scss檔案

import "./css/index.scss";

最後在終端執行npm run dev 命令即可

打包樣式表的圖片以及字型字型

使用url-loader和file-loader來處理

1.安裝包

cnpm install url-loader file-loader -D

如果在這裡報錯的話，就試試先執行下面的命令再進行安裝,

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.設定規則：更改webpack.config.js的module中的rules陣列

// 圖片的設定規則
            {
                // 設定圖片的字尾名
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                // limit用來設定位元組數，只有小於limit值的圖片，才會轉換
                use: "url-loader?limit=16940",
            }

在index.html中新增一個div

<div class="box">

    </div>

在index.css中新增相關樣式

.box {
  width: 200px;
  height: 200px;
  border: 1px solid firebrick;
  background-image: url(../img/sortPhone_03.png);
}

最後在終端執行npm run dev 命令即可

如果在index.html中直接新增圖片,瀏覽器中是不顯示的

<img src="./img/sortPhone_03.png" alt="">

因為裝了外掛，所以圖片到記憶體裡面去了，地址就要改一改

<img src="/src/img/sortPhone_03.png" alt="">

最後在終端執行npm run dev 命令即可

打包js檔案中的高階語法

如果是webpack 4版本的話，可能要裝一下,如果是5的話，可以不用搞這一步

安裝babel系列的包

1.安裝babel轉換器

npm install babel-loader @babel/core @babel/runtime -D

2.安裝babel語法外掛包

npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3.在專案根目錄下建立並設定babel.config.js檔案

module.exports={
	presets:["@babel/preset-env"],
	plugins:["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

4.設定規則：更改webpack.config.js的module中的rules陣列

{
test:/\.js$/,
use:"babel-loader",
exclude:/node_modules/
}

Vue單檔案元件

vue安裝Vetur外掛可以使得.vue檔案中的程式碼高亮

設定.vue檔案的載入器

1.安裝vue元件的載入器

npm install vue-loader vue-template-compiler -D

上一個命令不可以的話就試試下面這個命令

cnpm install vue-loader vue-template-compiler -D

4.設定規則：向webpack.config.js新增一些內容

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports ={
plugins: [htmlPlugin, vuePlugin],
module: {
 rules:{
 ......其他規則
 // vue檔案的設定規則
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
 }
}

}

在webpack中使用vue

1.安裝vue

npm install vue -S

上面命令報錯就使用下面的命令

cnpm install vue -S

2.在index.js中匯入vue

import Vue from "vue";

3.在inde.html中建立：

<div id="app">

    </div>

在src資料夾下建立test.vue檔案，內容為

<template>
  <!-- 這裡面內容自定義 -->
  <div>hello</div>
</template>
<script>
export default {};
</script>
<style>
</style>

4.在index.js中建立Vue範例物件，並引入test.vue

import test from "./test.vue";
const vm = new Vue({
    el: "#app",
    // render函數渲染單檔案元件
    //h()裡面test是上面import來的test
    render: (h) => h(test),
})

可能有個報錯：

DevTools failed to load SourceMap: Could not load content for webpack://package/node_modules/sockjs-client/dist/sockjs.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

module.exports ={
	plugins: [htmlPlugin, vuePlugin],
	//加上這個設定
	devtool: 'inline-source-map',
}

使用webpack打包釋出專案

1.設定package.json

"scripts": {
    "dev": "webpack serve --open Chrome.exe",
    //"build": "webpack -p"		這是webpack4版本的寫法
    "build": "webpack"
  },

2.專案打包

npm run build

在專案打包(npm run build)之前,可以將dist目錄刪除，打包完成後會生成全新的dist目錄

dist資料夾下生成一個bundle.js檔案和一個index.html檔案，就說明打包成功