Vue--webpack打包js⽂件
介绍
webpack是⼀个前端的静态资源打包⼯具，能让浏览器也⽀持模块化。它将根据模块的依赖关系进⾏静态分析，然后将这些模块按照指定的规则⽣成对应的静态资源。
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的⼊⼝⽂件
每当修改js⽂件内容后，都要webpack重新打包，打包时要指定⼊⼝和出⼝⽐较⿇烦，可通过配置解决
在  webpack-demo2 ⽬录下创建  fig.js 配置⽂件，该⽂件与  src 处于同级⽬录
在fig.js⾥写如下配置
// 引⼊node中的path模块，处理⽂件路径的⼩⼯具
const path = require('path')
// 导出⼀个webpack具有特殊属性配置的对象
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打包流程 面试导⼊导出模块
上⾯我们的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))

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。