安装webpack项目

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项目相关推荐

安装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 ...
Webpack安装及简易webpack项目配置（4.0以上版本）
一开始照着书上的敲,怎么也run不起来,说缺少webpack-cli.就从网上找"补救方法",然,在我这里都不管用,索性还是看中文官方文档,瞬间run起来了,舒服.毕竟第一次跑通, ...
VUE利用webpack创建项目失败--离线安装webpack下载模板
@TOC无法翻墙的–离线安装webpack下载模板最近在学习vue过程中利用webpack生成模板创建项目的时候发现一直卡在下载模板这一步,如图所示 , 查资料发现自己网无法连接git官网导致下载失 ...
webpack 项目使用--转换为React项目（4）
在上面的几篇博客中我们创建了webpack项目,现在我们需要将webpack项目转换为react项目,如何进行转换 1.将项目中的node_modules 文件夹删除 2. 安装dom 和react- ...
webpack 项目使用webpack-dev-server 自动编译（2）
在上一篇的博客中我们使用webpack 创建了一个项目创建webpack 项目(1) https://blog.csdn.net/datouniao1/article/details/1194269 ...
webpack 项目使用--创建webpack 项目（1）
1.新建一个文件夹假设文件夹的名称为 wdgapp,并且通过命令行到该目录下 2. 初始化项目 npm init -y 3.在wdgapp 文件夹中创建src 文件夹(源代码) 和dist(编译生成 ...
webpack项目中使用vue
webpack项目中使用vue 第一步:运行 npm i vue –S 安装vue 第二步:在src->index.js入口文件中,通过 import Vue from 'vue' 来导入vue ...
分析vue-cli@2.9.3 搭建的webpack项目工程
前言已经有很多分析Vue-cli搭建工程的文章,为什么自己还要写一遍呢.学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景.你不一定能看到别人看到的风景,体会到别人的心情.只有自己去登山 ...
webpack项目上传云服务器,webpack项目上传云服务器
webpack项目上传云服务器内容精选换一换为了避免不必要的费用产生,完成本示例体验后,可释放以下资源.资源释放后无法恢复,请谨慎操作.项目是使用DevCloud各服务的基础,删除项目可将该项目 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

安装webpack项目

附加: 可能遇到问题

安装webpack项目相关推荐

最新文章

热门文章