webpack原理及使用解析

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