从零开始的 webpack4

浏览:574 发布日期: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"

 },

 ...

}

{

 "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'。

简易打包已经完成

评论() 相关

后面还有条评论,

您需要登录后才可以评论登录 | 立即注册

xtwlkj9999 10-25
ThinkPHP在线客服系统 Ai智能客服系统在线客服源码
fatie 03-29
安全私密的聊天系统可免费使用可转让可定制
dingji 03-23
2022最完备原生电商多端发布支持源码及定制
fatie 03-17
安全私密的聊天系统可免费使用可转让可定制
springblog 01-15
springboot后台管理系统|springboot在线商城购物系统

收藏

赞

piyelin

积分:59 等级:LV0

热点推荐

(追記) (追記ここまで)

最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。