一、简介
- css，html，js，png，sass等文件，有些不能直接放在服务器上被浏览器解析，因此需要webpack打包处理后放到服务器上，变成浏览器可以直接解析的文件
- CommonJs，AMD，CMD，Modules等模块化的代码，浏览器解析不了，打包后可以处理成浏览器能直接解析的文件
- 模块化开发后，webpack可以整合各个模块之间的依赖关系
- 打包工具: webpack，grunt，gulp等工具
- 压缩图片，将ts转换为js等
二、安装
1. NPM全局安装webpack
- 全局安装： 在cmd窗口及IDE的控制台都可以使用的webpack；
# -g代表全局安装，该版本支持vue cli2
npm install webpack@3.6.0 -g
# 验证是否成功及版本
webpack -version
三、入门使用
1. 指令
1. src目录为要写的前端代码，一般用main.js做为js代码的入口，main.js会用到其他模块的代码；
2. cmd控制台进入项目所在目录结构用下面指令：
webpack ./src/main.js ./dist/bundle.js
(将main.js打包成dist目录的bundle.js)；
3. 在index.html中直接引入bundle.js即可；
4. 每次修改后需要重新打包
2. 目录结构
main.js
let info = "test case";
/*main.js: 1. 作为程序的入口，打包时候就是打包该文件*/
import * as obj from "./first.js";
console.log(info);
console.log(obj.name)
first.js
let name = "shuzhan"
export {name}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
四、优化
- webpack ./src/main.js ./dist/bundle.js 指令太长了
- 如何将打包的源文件和目标文件配置在配置文件中
1 构建npm工程
npm init -y
2. 新增webpack.config.js文件
const path = require('path');
/*入口及出口的绝对路径，绝对路径是通过npm来获取的*/
module.exports = {
entry: './src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename: 'bundle.js',
},
}
3. 打包
# 直接打包即可
webpack
五、 全局/局部webpack
1. 全局webpack
- 在控制台通过webpack进行打包的都是全局webpack
2. 项目webpack
- 在package.json.js中添加映射指令；
- 将webpack指令替换为了 npm run build指令；
- 后面通过npm run build来打包，优先去本地找webpack，如果没有则取全局webpack；
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
"author": "",
"license": "ISC"
}
2.3 项目webpack安装
npm install webpack@3.6.0 --save-dev
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
