webpack是JavaScript前端静态资本打包器（module bundler）。

一、实例运用
①起首装置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。

二、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