1.初始化配置package.json

npm init

2.安装webpack

npm install webpack --save-dev

3.安装webpack-cli

npm install webpack-cli --save-dev

4.安装webpack-dev-server 用于启动服务

npm install webpack-dev-server --save-dev

5.创建webpack.config.js (于根目录手动创建并写入内容)

var path = require('path');
var config = {entry: {main: './index' //入口文件},output: {path: path.join(__dirname, './dist'), //打包后输出目录名publicPath: '/dist/',filename: 'index.js'}
}
module.exports = config;

6.在package.json里面配置如下(scripts代码部分,配置webpack-dev-server的命令)

8080 //是配置的端口号,如果端口号冲突可自行更改成其他端口号
npm run dev //运行可启动项目
npm run webpack //运行可生成dist
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --host localhost --port 8080 --config webpack.config.js","webpack": "webpack"
}

7.创建index.js (于根目录手动创建并写入内容)

console.log('1')

8.创建index.html (于根目录手动创建并写入内容)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>node</title>
</head>
<body><div id="app"> Hello World! </div><script src="/dist/index.js"></script>
</body>
</html>

9.启动项目

根目录打开cmd输入命令,启动后的地址为 http://localhost:8080/
npm run dev

附加: 可能遇到问题

问题.1

- 我这里webpack相关插件的默认版本是"webpack": "^5.30.0","webpack-cli": "^4.6.0","webpack-dev-server": "^3.11.2"- 报错如下Error: Cannot find module 'webpack-cli/bin/config-yargs'- 后来找了下解决方案方案1.重装node_modules (无效)方案2.然后把webpack的版本号换了下,结果可用正常运行(可以)"webpack": "^4.41.2","webpack-cli": "^3.3.10","webpack-dev-server": "^3.9.0"

问题.2

待添加...

以下是可用的package.json配置(可以直接全部复制到package.json里面),或者只复制webpack的版本号部分也行

{"name": "node1","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --host localhost --port 8080 --config webpack.config.js"},"author": "","license": "ISC","devDependencies": {"webpack": "^4.41.2","webpack-cli": "^3.3.10","webpack-dev-server": "^3.9.0"},"description": ""
}

安装webpack项目相关推荐

  1. 安装truffle的前提条件(nodejs和npm),truffle的webpack案例测试,webpack项目中的报错

    truffle安装 Ubuntu20.04下truffle相关组件版本如下: Truffle v5.2.4 (core: 5.2.4) Solidity v0.5.16 (solc-js) Node ...

  2. Webpack安装及简易webpack项目配置(4.0以上版本)

    一开始照着书上的敲,怎么也run不起来,说缺少webpack-cli.就从网上找"补救方法",然,在我这里都不管用,索性还是看中文官方文档,瞬间run起来了,舒服.毕竟第一次跑通, ...

  3. VUE利用webpack创建项目失败--离线安装webpack下载模板

    @TOC无法翻墙的–离线安装webpack下载模板 最近在学习vue过程中利用webpack生成模板创建项目的时候发现一直卡在下载模板这一步,如图所示 , 查资料发现自己网无法连接git官网导致下载失 ...

  4. webpack 项目使用--转换为React项目(4)

    在上面的几篇博客中我们创建了webpack项目,现在我们需要将webpack项目转换为react项目,如何进行转换 1.将项目中的node_modules 文件夹删除 2. 安装dom 和react- ...

  5. webpack 项目使用webpack-dev-server 自动编译 (2)

    在上一篇的博客中我们使用webpack 创建了一个项目 创建webpack 项目(1) https://blog.csdn.net/datouniao1/article/details/1194269 ...

  6. webpack 项目使用--创建webpack 项目(1)

    1.新建一个文件夹 假设文件夹的名称为 wdgapp,并且通过命令行到该目录下 2. 初始化项目 npm init -y 3.在wdgapp 文件夹中创建src 文件夹(源代码) 和dist(编译生成 ...

  7. webpack项目中使用vue

    webpack项目中使用vue 第一步:运行 npm i vue –S 安装vue 第二步:在src->index.js入口文件中,通过 import Vue from 'vue' 来导入vue ...

  8. 分析vue-cli@2.9.3 搭建的webpack项目工程

    前言 已经有很多分析Vue-cli搭建工程的文章,为什么自己还要写一遍呢.学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景.你不一定能看到别人看到的风景,体会到别人的心情.只有自己去登山 ...

  9. webpack项目上传云服务器,webpack项目上传云服务器

    webpack项目上传云服务器 内容精选 换一换 为了避免不必要的费用产生,完成本示例体验后,可释放以下资源.资源释放后无法恢复,请谨慎操作.项目是使用DevCloud各服务的基础,删除项目可将该项目 ...

  10. Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue

    Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

最新文章

  1. 投影参数_智能投影仪参数如何去看,其实很简单
  2. linux系统启动过程(三)
  3. 14种常见HTTP状态码
  4. Leetcode 208. 实现 Trie (前缀树) 解题思路及C++实现
  5. Big Data Exchange宣布在南京建设数据中心
  6. 何谓成功的软件架构设计
  7. HDU 2149-Public Sale(巴什博奕)
  8. 三朵云 华为_云时代和5G将重构网络结构
  9. 关于Windows® API Code Pack for Microsoft® .NET Framework
  10. plsql大字段保存类型_大揭秘,学习python,为什么数据类型有这么重要
  11. AntDesignUI - V3.0 技术手册(资源篇)
  12. python路径设置方法,R不转义,以及r转义出错SyntaxError
  13. Navicat MySQL连接Linux下MySQL的及2003错误解决方案
  14. 数字化转型案例:美的集团
  15. java 小说系统_java 实现小说管理系统
  16. Minecraft mod制作简易教程(五)——本地化和国际化
  17. Java将一张图片放在另一张图片上(位置可选)
  18. 有哪些适合男生的蓝牙耳机?520情人节适合送男生的蓝牙耳机推荐
  19. 从“金融IT”乙方转到甲方的职场感悟
  20. MQL4自编指标学习6-MQL4中MACD指标的实现

热门文章

  1. 使用QFile进行文件操作(QFile可以使用FILE *指针,还必须指定AutoCloseHandle)
  2. spawnSync /bin/sh ENOENT
  3. html 选择app打开,HTML打开APP
  4. Java、JSP网上考试系统
  5. mysql错误1062 23000_为什么在MySQL中会发生以下错误:错误1062(23000):条目重复?...
  6. java中Optional的应用,以及map和flatMap的区别
  7. Hadoop之环境配置
  8. 虚函数表(vtable)
  9. UML之状态图、活动图
  10. IDEA中的.iml文件和.idea文件的作用