1. webpack是一个开源的javascript模块打包工具
核心功能是解决模块之间的依赖，把各个模块按照的特定的规则和顺序组织在一起，
终合并为一个或者多个js文件，此过程就是模块打包（可以把webpack理解为一个
模块处理工厂，由它去进行加工、拼装处理、产出最终的资源文件，等待送往用户）
2. webpack是当应用规模庞大的情况下，便于维护
3. webpack支持多种模块标准，包括AMD 、CommonJS 、以及最新的 ES6模块
webpack有完备的代码分割解决方案。（例如首屏加载只加载必要的部分，不太重
要的功能放到后面动态加载，这样可以提升渲染的速度）
webpack可以处理各种类型的资源，除js外，还可以处理样式、模版、图片等等
4. webpack的安装
webpack对系统没有要求，它唯一的依赖是node.js, 可以去https://nodejs.org 下载安
装一个LTS稳定版本。
（1）安装node环境 （安装完成后，运行node -v 显示出版本号就👌）
（2）新建一个工程目录
（3）用命令进入该目录，执行npm初始化 npm init 或 yarn init 根据自己的环境选择，此操作
的作用就是生成一个package.json文件，相当于npm项目的说明书，记录项目名称、版本、仓库地址等信息。
（4）npm install webpack webpack-cli --save-dev 安装webpack核心模块和webpack-cli命令工具
--save-dev参数是将webpack以及webpack-cli 作为工程的devDependencies(开发环境依赖)，添加记录在package.json中 （安装完后，运行npx webpack -v 以及 npx webpack-cli -v 显示版本号就👌）
5.打包一个小demo
（1）新建一个index.js 一个other.js 一个index.html
（2）index.js:
import other from './other.js';
document.write('my first webpack<br />');
other();
(3) other.js:
export default function(){
document.write('hello world');
}
(4) index.html:
<!DOCTYPE html>
<head>
<meat charset="UTF-8">
<title>test</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
(5) 运行打包命令
npx webpack --entry=./index.js --output-filename=bundle.js --mode=development
用浏览器打开index.html 就可以看到访问的结果了！（mode是打包模式 提供三种 development、production、none）
6. 看上面打包命令如何每次修改程序，都到运行一大串的命令 这种太累了，解决它的有效方法就是在package.json文件中添加
“scripts”: {
"build" : "webpack --entry=./index.js --output-filename=bundle.js --mode=development"
}
scripts是npm提供的脚本命令功能
现在只需在命令行输入 npm run build 就是可以完成一次打包了（短了就输出了😄）
7. 上面这段配置（"build" : "webpack --entry=./index.js --output-filename=bundle.js --mode=development"）看起来格式很不美丽，webpack提供一个默认配置文件叫webpack.config.js
(* 一般的工程源代码会放在/src, 打包后的webpack默认放在/dist)
webpack.config.js: (CommJS标准来写)
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
},
mode: 'development'
}
这种写了之后，改动一下scripts的代码如下：(webpack就会自动去读取wepack.config.js的配置内容)
“scripts”: {
"build" : "webpack"
}
8. webpack还提供了 webpack-dev-server 可以帮助开发者自动更新内容（特性live-reloading），不必每次运行 npm run build
(1)安装 npm install webpack-dev-server --save-dev
(2)
“scripts”: {
"build" : "webpack",
"dev": "webpack-dev-server"
}
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
},
mode: 'development'，
devServer: {
port: 3000, //访问端口
open: true, //自动打开浏览器
static: __dirname + "/src/", //打包后的js挂在的虚拟路径位置 (这里有坑，注意的wepack版本)
}
}
到此我们对webpack基本上有个整体的认识了！
总结：webpack可以帮助我们打包处理模块间的依赖生成一个js文件（也可能多个）
webpack-dev-server为开发者提供一个本地服务器，处理打包资源与静态资源的请求，live-reloading功能监听文件变化，自动刷新页面提高开发效率。
接下来会继续记录学习关于webpack的问题、如何编写和使用模块
扫一扫
1432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
