webpack（模块打包器）
标签：
JavaScript
入门：https://www.jianshu.com/p/42e11515c10f
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
四个核心概念：
- 入口(entry) webpack 应该使用哪个模块，来作为构建其内部依赖图的开始；
module.exports = {
entry: 'src/file.js'
};- 输出(output) 告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件；
const path = require('path');
module.exports = {
entry: 'src/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};- loader 将所有类型的文件转换为 webpack 能够处理的有效模块，让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）；
- 插件(plugins) 功能极其强大，可以用来处理各种各样的任务，从打包优化和压缩，一直到重新定义环境中的变量。
本地项目，安装webpack
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install --save-dev webpack目录结构
dist\index.html = index.html
<html>
<head>
<title>Getting Started</title>
<!-- <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/lodash@4.16.6"></script> -->
</head>
<body>
<!-- <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/index.js"></script> -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./bundle.js"></script>
</body>
</html>src\index.js
npm install --save lodash// +
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// - Lodash, currently included via a script, is required for this line to work
// + Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());执行命令
$ webpack src/index.js dist/bundle.js
Hash: cf2f3ca9f6261d90ade5
Version: webpack 3.10.0
Time: 534ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./src/index.js 357 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module页面效果
在项目目录下新建个webpack.config.js文件。该配置文件上配置了webpack的相关执行效果
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};代替webpack src dist命令，配置文件代替CLI里的相关命令执行。
$ webpack --config webpack.config.js
Hash: cf2f3ca9f6261d90ade5
Version: webpack 3.10.0
Time: 517ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./src/index.js 357 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module上面的命令也可以直接写webpack，因执行webpack会自动调用webpack.config.js。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦