webpack - 安装和使用

webpack的核心是现代javascript 应用程序的静态模块打包器。当webpack处理你的应用程序时,
它会在内部从一个或多个入口点构建一个依赖关系图,然后将你的项目需要的每个模块组合到一个
或多个包中,这些包是静态资产,可以为你的内容提供服务。

1. 安装webpack

创建项目目录,初始化并安装webpack相关安装包

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

创建相关文件
src/index.js

import _ from 'lodash';
function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

dist/index.html

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

2. 配置webpack

webpack.config.js

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

package.json

{
   "name": "webpack-demo",
   "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.4.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.20"
   }
 }

3. 运行build命令进行打包编译

npm run build

posted @   箫笛  阅读(92)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2021-11-22 数据结构-javascript实现【队列】
2021-11-22 数据结构-javascript实现【 栈 】
2021-11-22 数据结构-javascript实现 【数组】
点击右上角即可分享
微信分享提示