webpack

阿超

发布于 2022-09-23 12:43:34

5390

发布于 2022-09-23 12:43:34

文章被收录于专栏：快乐阿超

细砂般数不尽的星，有颗向我眨眼睛。——芥川龙之介《侏儒的话》摘自芥川龙之介的《侏儒的话》。

首先是官方文档：https://webpack.docschina.org/

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

接下来我们跟着快速上手一下，将一个普通的html文件使用webpack改造

https://webpack.docschina.org/guides/getting-started

创建目录，安装依赖

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

新建index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

src/index.js

function component() {
  const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

我们打开页面试试

正常运行，开始改造，首先在package.json中申明"private": true并移除 "main": "index.js",

{
  "name": "simple-webpack",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

然后将index.html放入新建的dist目录下

然后我们需要将index.html里引入的lodash从<script>方式引入改为本地打包引入

先安装

npm install --save lodash

然后修改src/index.js

import _ from 'lodash';
function component() {
    const element = document.createElement('div');
  
    // lodash 在当前 script 中使用 import 引入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  
    return element;
  }
  
  document.body.appendChild(component());

然后是index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
  </head>
  <body>
   <script src="main.js"></script>
  </body>
</html>

执行:

npx webpack

再次尝试用浏览器打开dist/index.html

成功改造

新建配置文件webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

通过新的配置文件再次构建

npx webpack --config webpack.config.js

我们在package.json中新建一个脚本

{
  "name": "simple-webpack",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

就可以使用