webpack原理及使用解析

webpack是JavaScript前端靜態資源打包器（module bundler）。

1、實例應用
①首先安裝webpack（能夠全局安裝，也能夠局部安裝）

全局：cnpm install -g webpack
局部：cnpm install --save-dev webpack

②安裝webpack-cli（webpack4+須要，用於在命令行運行webpack）

npm install --save-dev webpack-cli

③建立package.json文件（NPM的標準說明文件，包含項目的基本信息、模塊依賴、運行的腳本信息）

cnpm init（執行時，須要數據項目的相關信息，可跳過）
cnpm init -y（全都默認）

④建立webpack.config.js文件（webpack的配置文件，需手動建立，可在任何位置，通常在整個文件夾的首層子目錄）

一個簡單的webpack.config.js配置：

module.exports = {
  entry:  __dirname + "/src/main.js",//已屢次說起的惟一入口文件
  output: {
    path: __dirname + "/public",//打包後的文件存放的地方
    filename: "bundle.js"//打包後輸出文件的文件名
  }
}

⑤入口文件main.js（做爲入口文件，裏面寫入須要依賴的模塊。。。鏈式依賴）

一個簡單的main.js文件：

const greeter = require('./Greeter.js');//main.js依賴的模塊，Greeter.js依次鏈式依賴下去
document.querySelector("#root").appendChild(greeter());

⑥執行打包
運行webpack命令，便可執行webpack.config.js
簡潔的執行打包命令，須要在pakeage.json中的script屬性中配置：
一個簡單的package.json配置文件

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是這裏，JSON文件不支持註釋，引用時請清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

npm的start命令是個特殊的命令，可直接執行npm start，通常狀況下執行腳本命令的格式是 npm run {script name}例如npm run bulid。

2、webpack打包原理和組成。

webpack由四個核心概念：入口(entry)、出口(output)、loader、插件(plugins)。

entry：表示webpack打包開始的入口文件。
output：標識webpack打包結束的導出文件（路徑和文件名）。
loader：轉換非JavaScript文件（webpack只能識別js文件），如Typescript、css、scss等，可配置對某一文件類型作具體的loader轉化。
plugins：能夠執行範圍更廣的任務（後續更新……）
module：能夠選擇development和production模式，webpack內部會進行相應的優化。

項目中使用
1⃣️本地調試，配置跨域請求
vue2:
config-->index.js配置

module.exports = {
    dev: {
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/baseURL/': {
                target: 'http://110.221.9.210:8090',//服務器域名
                changeOrigin: true,
                pathRewrite: {
                    '^/baseURL': 'baseURL'
                }
            }
        },
        host: 'localhost',
        port: 8080,
    }
}

build-->webpack.base.conf.js配置

module.exports = {
    entry: {},
    output: {},
    resolve: {
        extensions: ['.js','.vue','.json'],
        alias: {
            '@': resolve('src')//resolve屬於path模塊，path.resolve()
        }
    }
}

vue3:
vue.config.js配置

let path = require('path');
function resolve(dir){
    return path.join(_dirname, dir)
}
module.exports = {
    devServer: {
        proxy: {
            '/baseURL': {
                target: 'http://110.221.9.210:8090',//服務器域名
                changeOrigin: true,
                pathRewrite: {
                    '^/baseURL': 'baseURL'
                }
            }
        }
    },
    chainWebpack: config => {
        config.resolve.alias
        .set('@',resolve('src'))
    }
}

其中axios.default.baseURL = '/baseURL'
請求接口實例：
this.$axios.get('/urlLev1／urlLev2/info.json').then(……)
瀏覽器請求連接：http://110.221.9.210:8090／baseURL／urlLev1／urlLev2/info.json