windows npm安装webpack

最新推荐文章于 2024-06-27 16:10:22 发布

weixin_30383279

最新推荐文章于 2024-06-27 16:10:22 发布

阅读量97

点赞数

文章标签： webpack json javascript ViewUI

原文链接：http://www.cnblogs.com/liuliwei/p/9202433.html

版权

Webpack:

Webpack 是一个前端资源加载/打包工具。

它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

参考下图：

安装Webpack:

1.首先需要安装node.js（npm）

　　下载地址：node.js download

　　下载直接安装就OK了。

　　安装之后打开cmd窗口输入node -v、npm -v即可查看相应版本。

2.安装Webpack

　　任意处创建文件夹（不可命名为webpack，容易冲突报错），cmd进入文件夹下npm init 初始化。回车直至出现Is this ok？输入yes。

　　在此过程中npm会为我们创建package.json文件。内容如下图红框。

　　接下来可以根据自己的选择进行命令安装。

　　局部安装：npm install webpack

　　　　　　　npm install webpack-cli

　　全局安装：npm install global webpack

　　　　　　　npm install global webpack-cli（生成目录脚手架）

　　以全局安装为例：

　　输入webpack -v出现版本号标识安装成功。

3.使用webpack

　　完善package.json加入

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},

　　webpack默认打包src/index，创建src文件夹并在src下创建index.js

　　cmd重新进入测试目录webpackTest运行 npm run dev/build。这时src同级会自动创建dist文件夹（webpack默认输出文件夹）

　　当打包报错时，在当前目录下运行npm install 后重新打包。

　　新建index.html测试打包

<!DOCTYPE html>
<html>
<head>
    <title>webpack-test</title>
    <script type="text/javascript" src="./dist/main.js"></script>
</head>
<body>
    
</body>
</html>

转载于:https://www.cnblogs.com/liuliwei/p/9202433.html

weixin_30383279

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
windows npm安装webpack

Webpack:Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。参考下图：安装Webpack:1.首先需要安装node.js（npm）　　下载地址：node.js download　　下载直接安装就OK了。　　安装之后打开cmd窗口输入node -v、np...
复制链接

扫一扫