Webpack 快速上手
2021-03-29 本文已影响0人
时光觅迹
在接触 webpack 之前，我们的工程目录如果比较复杂，在管理上可能就会遇到麻烦，里面有用的或没用的文件都混杂在一起，时间一长，可能自己都忘了哪些文件已经作废却又没有被清理出去，等到发布版本的时候，往往这些已经作废的文件也一并被打包出去……
引用webpack官方介绍：
概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
简而言之，webpack可以帮我们把我们工程里面实际用到的资源打包起来， 包括所有的 脚本、图片、样式表 等等。
让我们开始尝试吧（在此之前，默认你已经准备好了 Node.js 开发环境）
-
选择自己熟悉的 IDE，我这里使用的是 Visual Studio Code，简称 VSCode
-
在磁盘中创建一个工程（说人话 “ 文件夹 ”）：webpack_test
-
在 VSCode 中打开 webpack_test 目录。
-
在工程中新建两个文件夹：src、dist
-
在终端中执行命令安装
webpack：
npm install webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org
然后你的目录结构应该会像这样
目录结构
- 以官网例子说明，接着我们再在工程中新建一个配置文件：
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
在 src 中新建 index.html 和 index.js
index.html
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
index.js
function component() {
var element = document.createElement('div');
// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
-
package.json中移除main入口，增加private
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {...}
...
}
- 现在让我们来执行构建命令：
npx webpack --config webpack.config.js
命令执行完毕之后，我们就能在工程下的 dist 目录中看到打包完成的文件了
