0003-进行创建Webpack项目

最新推荐文章于 2021-05-29 12:16:31 发布

milijiangjun

最新推荐文章于 2021-05-29 12:16:31 发布

阅读量568

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/milijiangjun/article/details/104017496

版权

Vue 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

创建项目：

打开node js 命令行

输入创建项目的语句

mkdir app

就会在当前的用户下面创建项目，文件地址如图

在 app 目录下添加 runoob1.js 文件，代码如下：

document.write("It Works");

在 app 目录下添加 index.html 文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</head>
<body>
	
</body>
</html>

使用 webpack 命令来打包命令行：

mkdir webpackDemo // 创建项目
cd webpackDemo // 进入项目
mkdir app // 在项目中创建app文件
mkdir common // 在项目中创建common文件
cd app // 进入app文件夹
touch app.js // 创建app.js文件
touch main.js // 创建main.js文件
cd .. //返回到webpackDemo项目根目录
cd common // 进入common文件
touch index.html // 创建index.html文件

然后我们可以进行创建Webpack

npm install webpack -g

上图命令1 查看npm 版本

上图命令2 创建webpack

C:\Users\wufengfeng>npm install webpack -g
npm WARN engine webpack@4.41.5: wanted: {"node":">=6.11.5"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine tapable@1.1.3: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine chrome-trace-event@1.0.2: wanted: {"node":">=6.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine enhanced-resolve@4.1.1: wanted: {"node":">=6.9.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine terser-webpack-plugin@1.4.3: wanted: {"node":">= 6.9.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine find-cache-dir@2.1.0: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine terser@4.6.3: wanted: {"node":">=6.0.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN optional dep failed, continuing fsevents@1.2.11
npm WARN engine pkg-dir@3.0.0: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine make-dir@2.1.0: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine find-up@3.0.0: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine pify@4.0.1: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine atob@2.1.2: wanted: {"node":">= 4.5.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine locate-path@3.0.0: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine atob@2.1.2: wanted: {"node":">= 4.5.0"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine p-locate@3.0.0: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine p-limit@2.2.2: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine p-try@2.2.0: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
npm WARN engine punycode@2.1.1: wanted: {"node":">=6"} (current: {"node":"4.4.3","npm":"2.15.1"})
C:\Users\wufengfeng\AppData\Roaming\npm\webpack -> C:\Users\wufengfeng\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
webpack@4.41.5 C:\Users\wufengfeng\AppData\Roaming\npm\node_modules\webpack
├── loader-runner@2.4.0
├── json-parse-better-errors@1.0.2
├── tapable@1.1.3
├── acorn@6.4.0
├── @webassemblyjs/helper-module-context@1.8.5 (mamacro@0.0.3)
├── schema-utils@1.0.0 (ajv-errors@1.0.1)
├── ajv-keywords@3.4.1
├── chrome-trace-event@1.0.2 (tslib@1.10.0)
├── eslint-scope@4.0.3 (esrecurse@4.2.1, estraverse@4.3.0)
├── @webassemblyjs/wasm-parser@1.8.5 (@webassemblyjs/helper-api-error@1.8.5, @webassemblyjs/helper-wasm-bytecode@1.8.5, @webassemblyjs/utf8@1.8.5, @webassemblyjs/ieee754@1.8.5, @webassemblyjs/leb128@1.8.5)
├── webpack-sources@1.4.3 (source-list-map@2.0.1, source-map@0.6.1)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── memory-fs@0.4.1 (errno@0.1.7, readable-stream@2.3.7)
├── @webassemblyjs/wasm-edit@1.8.5 (@webassemblyjs/helper-buffer@1.8.5, @webassemblyjs/wasm-opt@1.8.5, @webassemblyjs/helper-wasm-bytecode@1.8.5, @webassemblyjs/helper-wasm-section@1.8.5, @webassemblyjs/wasm-gen@1.8.5, @webassemblyjs/wast-printer@1.8.5)
├── loader-utils@1.2.3 (emojis-list@2.1.0, big.js@5.2.2, json5@1.0.1)
├── neo-async@2.6.1
├── @webassemblyjs/ast@1.8.5 (@webassemblyjs/helper-wasm-bytecode@1.8.5, @webassemblyjs/wast-parser@1.8.5)
├── enhanced-resolve@4.1.1 (graceful-fs@4.2.3, memory-fs@0.5.0)
├── micromatch@3.1.10 (arr-diff@4.0.0, array-unique@0.3.2, kind-of@6.0.3, fragment-cache@0.2.1, object.pick@1.3.0, nanomatch@1.2.13, define-property@2.0.2, regex-not@1.0.2, to-regex@3.0.2, extend-shallow@3.0.2, braces@2.3.2, extglob@2.0.4, snapdragon@0.8.2)
├── node-libs-browser@2.2.1 (https-browserify@1.0.0, tty-browserify@0.0.0, punycode@1.4.1, path-browserify@0.0.1, constants-browserify@1.0.0, domain-browser@1.2.0, os-browserify@0.3.0, process@0.11.10, console-browserify@1.2.0, querystring-es3@0.2.1, vm-browserify@1.1.2, stream-browserify@2.0.2, timers-browserify@2.0.11, string_decoder@1.3.0, util@0.11.1, events@3.1.0, url@0.11.0, readable-stream@2.3.7, stream-http@2.8.3, assert@1.5.0, buffer@4.9.2, browserify-zlib@0.2.0, crypto-browserify@3.12.0)
├── watchpack@1.6.0 (graceful-fs@4.2.3, chokidar@2.1.8)
├── terser-webpack-plugin@1.4.3 (is-wsl@1.1.0, serialize-javascript@2.1.2, source-map@0.6.1, worker-farm@1.7.0, terser@4.6.3, find-cache-dir@2.1.0, cacache@12.0.3)
└── ajv@6.10.2 (fast-deep-equal@2.0.1, json-schema-traverse@0.4.1, fast-json-stable-stringify@2.1.0, uri-js@4.2.2)

创建后会出现这个

milijiangjun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0003-进行创建Webpack项目

创建项目：打开node js 命令行输入创建项目的语句mkdir app就会在当前的用户下面创建项目，文件地址如图在 app 目录下添加 runoob1.js 文件，代码如下：document.write("It Works");在 app 目录下添加 index.html 文件，代码如下：<!DOCTYPE html><htm...
复制链接

扫一扫

专栏目录