Vue--webpack打包js文件

简介: Vue--webpack打包js文件

介绍


webpack是一个前端的静态资源打包工具,能让浏览器也支持模块化。它将根据模块的依赖关系 进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

官网:https://webpack.docschina.org/

webpack的作用有下面几点:

webpack核心主要进行javascript资源打包。

  • 它结合其他工具, 将多种静态资源css、png、sass分类转换成一个个静态文件,这样可以减少页面的请求。
  • 可集成babel工具实现EcmaScript 6 转 EcmaScript 5 ,解决兼容性问题。
  • 可集成http服务器。
  • 可集成模块热加载,当代码改变后自动刷新浏览器等等功能。


安装


全局安装:

不推荐全局安装webpack,全局安装的webpack,在打包项目的时候,使用的是你安装在自己电脑上的webpack,如果项目到了另一个人的电脑上,他可能安装的上旧版本的webpack,那么就可能涉及到兼容性的问题。而且他如果没有在全局安装webpack就无法打包。

# 安装最新版本
npm install --global webpack
# 或者 安装特定版本
npm install --global webpack@<version>

如果上面安装的是  webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行

npm install --global webpack-cli

可通过  npm root -g 查看全局安装目录

如果安装后,命令行窗口  webpack 命令不可用,则手动配置 全局目录的 环境变量

我的电脑 -> 右键属性 -> 高级系统设置 -> 高级 -> 环境变量 -> 系统变量 -> path ->在末尾添加上面的路径,记得前面用 ; 分号隔开

然后再重新打开 cmd 命令行窗口,输入  webpack -v 即可使用

全局安装  webpack@v4.35.2 与  webpack-cli@3.3.6

npm i -g webpack@v4.35.2
npm i -g webpack-cli@3.3.6

安装后查看版本号。如果有红色字提醒,没关系忽略它

webpack -v


简单使用

新建目录结构如下:

在webpack-demo2目录下执行下面代码打包js文件

E:\vue\npm-demo\webpack-demo2>webpack ./src/main.js -o ./dist/bundle.js

./dist/bundle.js表示将所有的js文件打包在dist目录下的bundle.js文件中,./src/main.js是所有js的入口文件


webpack.config.js


每当修改js文件内容后,都要webpack重新打包,打包时要指定入口和出口比较麻烦,可通过配置解决

在  webpack-demo2 目录下创建  webpack.config.js 配置文件,该文件与  src 处于同级目录

在webpack.config.js里写如下配置

// 引入node中的path模块,处理文件路径 的小工具
const path = require('path')
// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'none', // 指定模式配置:"development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模块文件路径 
    // 出口
    output: {
        // path: './dist/', 错误的,要指定绝对路径
        path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
        filename: 'bundle.js' 
    }
}

然后就可以执行下面的命令进行打包了,不需要再输入入口和出口了

webpack

如果没有mode参数,则会出现黄色警告。


本地安装


本地安装的时候,建议把webpack安装到devDependencies 开发依赖 ( --save-dev ) 中,因为 webpack 只是一个打包工具,项目如果需要上线,上线的是打包的结果,而不是这个工具。

所以我们为了区分生产环境和开发环境依赖,通过  --save (生产环境)和  --save-dev (开发环境)来区分。

为了测试本地安装,先把全局安装的  webpack 和  webpack-cli 卸载掉

npm uninstall -g webpack
npm uninstall -g webpack-cli

在webpack-demo2中,使用npm init -y 初始化,会生成一个package.json的文件,后面要用到。


本地安装命令

# 安装最新版本
npm install --save-dev webpack  
# 安装特定版本
npm install --save-dev webpack@<version>

如果上面安装的是  webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行

npm install --save-dev webpack-cli
# 1. 进入到 webpack-demo2
cd e:\vue\npm-demo\webpack-demo2
# 2. 初始化项目 `-y` 是采用默认配置
npm init -y
# 3. 安装 v4.35.2 ,不要少了 v
npm i -D webpack@v4.35.2
# 安装 CLI
npm i -D webpack-cli@3.3.6

安装完执行webpack -v会报错

在本地安装的  webpack ,要通过在项目文件夹下  package.json 文件中的  scripts 配置命令映射

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack"
  },

然后查看版本号就使用下面的命令

npm run show

运行 main.js 模块:

npm run start

注意:如果命令映射的别名是  start ,可省略  run 进行简写执行,即:

npm start

打包构建

npm run build


自动打包


前面我们修改了代码之后,都要手动打包,这样很浪费我们的时间,那我们想当我们修改了代码之后能不能自动帮我们完成打包,答案当然是可以的,只需要在package.json的script里加上watch参数就可以了

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack",
    "watch": "webpack --watch"  // 加上这个就可以自动帮我们打包了
  },

添加上watch参数之后,在命令行执行npm run watch,程序会阻塞状态,当我们更改代码之后,自动会帮我们完成打包


导入导出模块


上面我们的webpack-demo2下有个src文件夹,里面有两个js文件,一个是bar.js,一个是main.js。main.js是主入口,引用了bar.js文件,既然要用到bar.js里的,那我们就要在bar.js里导出,然后再main.js里导入


导出默认成员

默认成员只能有一个,要不然会报错。

export default 成员

bar.js

// ES6 注意 一个模块文件中,只能导出一个默认成员,注释掉一个
export default function() {  // 导出函数
    console.log('我是bar模块--ES6')
}
export default { // 导出对象
    name: '邹邹'
}

要在main.js文件里使用bar.js文件里的内容,还要在main.js里导入

main.js

// Es6 导入默认成员
import bar from './bar'
bar()  // 调用函数
console.log(bar)
console.log(bar.name)  // 对象的属性值


导出非默认成员

默认成员只能导出一个,非默认成员可以导出多个。

非默认成员必须要有成员名称

bar.js

// ES6 可以导出多个非默认成员
export const x = 'xxx'
export var y = 'yyy'
export function add (a, b) {
    return a+b
}
// export z = 'zzz' 错误的,没有数据类型
// export 'wwww' 错误的,没有变量名和类型
// export function (x, y) { 错误的,没有函数名
//     return x+y
// }

main.js

// Es6 导入非默认成员
// 通过 解构赋值 的方式 来加载成员
// x 对应的是bar.js 模块中的 x 成员 ,y对应y成员,ad对应add成员 函数
import {x, y, add} from './bar'
console.log(x, y, add(10, 20))
// 通过解构赋值按需导入你需要的成员 
import {x, y} from './bar'
console.log(x, y)
// 会将默认成员 与 非默认成员 全部导入
import * as bar2 from './bar'
console.log(bar2, bar2.x, bar2.y, bar2.add(1,2))

目录
打赏
0
0
0
0
14
分享
相关文章
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
925 1
Next.js 实战 (八):使用 Lodash 打包构建产生的“坑”?
这篇文章介绍了作者在使用Nextjs15进行项目开发时遇到的部署问题。在部署过程中,作者遇到了打包构建时的一系列报错,报错内容涉及动态代码评估在Edge运行时不被允许等问题。经过一天的尝试和调整,作者最终删除了lodash-es库,并将radash的部分源码复制到本地,解决了打包报错的问题。文章最后提供了项目的线上预览地址,并欢迎读者留言讨论更好的解决方案。
41 10
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
62 4
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
Node.js JXcore 打包
10月更文挑战第8天
51 1
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
270 0
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
49 1
JavaScript中的原型 保姆级文章一文搞懂
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等