webpack原理及使用解析

doodlewind 发布于2019-08-23 17:01 / 1886人阅读

摘要：二打包原理和组成。标识打包结束的导出文件路径和文件名。可以执行范围更广的任务后续更新可以选择和模式，内部会进行相应的优化。项目中使用本地调试，配置跨域请求配置服务器域名配置属于模块，配置服务器域名其中请求接口实例浏览器请求链接

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103675.html

最全的前端模块化方案

摘要：模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。顺手写一个省略省略实现此时的对应的形式解析省略执行兼容，模块化语法。模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容 CommonJS AMD 及核心原理实现 CMD 及核心原理实现 UMD 及源码解析 ES6...

antz 2019-08-23 17:07 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
【进阶3-5期】深度解析 new 原理及模拟实现

摘要：使用指定的参数调用构造函数，并将绑定到新创建的对象。由构造函数返回的对象就是表达式的结果。情况返回以外的基本类型实例中只能访问到构造函数中的属性，和情况完全相反，结果相当于没有返回值。定义 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 ——（来自于MDN）举个栗子 function Car(color) { this.color = co...

Baaaan 2019-08-23 14:31 评论0 收藏0