从零开始的 webpack4

浏览:104 发布日期:2020/01/13 分类:系统代码
从零开始的 webpack4
简易打包
1.初始化项目 & 创建项目
mkdir webpack4-react && cd webpack4-react
npm init -y
2.安装 webpack & webpack 的 cli
当前 webpack 版本:4.41.5
当前 webpack-cli 版本:3.3.10

npm install --save-dev webpack webpack-cli
或yarn add webpack webpack-cli --dev
调整 package.json 文件,以便确保我们安装包是私有的(private),并且移除 main 入口。这可以防止意外发布你的代码。
package.json{
  ...
  "description": "webpack4-react",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}
3.下载 lodash 依赖
npm install --save lodash
或yarn add lodash
4.创建以下目录结构、文件和内容:
webpack4-react
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
package.json{
  "name": "webpack4-react",
  "version": "1.0.0",
  "description": "webpack4-react",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.15"
  },
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}
dist/index.html<!DOCTYPE html>
<html>
  <head>
    <title>webpack4-react</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>
src/index.js
import _ from 'lodash';
function component() {
  var element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
5. 执行打包命令
npx webpack

将看到以下输出:Hash: 17a14a12467064d9d4dd
Version: webpack 4.41.5
Time: 1239ms
Built at: 2020-01-04 10:56:16
  Asset      Size  Chunks             Chunk Names
main.js  72.1 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 210 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module
此时在 dist 文件夹下已经生成一个 main.js 文件
在浏览器中打开 dist 下的 index.html,如果一切访问都正常,你应该能看到以下文本:'Hello webpack'。

简易打包已经完成
评论( 相关
后面还有条评论,点击查看>>
欢乐生肖 澳洲幸运10开奖结果 幸运飞艇官网 飞速赛车平台 澳洲幸运10开奖结果 幸运飞艇官网 快乐赛车 欢乐生肖 极速PK拾 快乐赛车