webpack搭建服务器

webpack-dev-server是一个小型的Node.js Express服务器,我们可以通过它搭建一个本地服务器,并且实现文件热更新;先确保你本地有安装npm，node

1、切换到你的目录下对项目进行初始化

npm init

一顿enter,yes之后我们会得到package.json文件(ps:json不能写注释,别复制过去直接用奥!否则会报错)

{"name": "webpacktest","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}

2、安装webpack

npm install webpack --save-dev

为什么使用--save-dev而不是--save?

--save 会把依赖包名称添加到 package.json 文件 dependencies 下;

--save-dev 则会把依赖包名称添加到 package.json 文件 devDependencies 下;

不过这只是它们的表面区别。它们真正的区别是，npm自己的文档说dependencies是运行时依赖，devDependencies是开发时的依赖。

安装成功后是这样的

"devDependencies": {"webpack": "^4.20.2"},

3、安装webpack-dev-server

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

安装成功之后你的可以看到依赖文件多出来一个

"devDependencies": {"webpack": "^4.20.2","webpack-dev-server": "^3.1.9"}

安装到这里结束,接下来开始配置,

新建webpack.config.js用来配置webpack

新建build文件夹作为输入位置

新建src文件夹存放入口文件,

在src先创建index.js

var el = document.getElementById('app');
el.innerHTML = '我是测试webpack!';

创建assets文件夹作为指定资源文件引用的路径(要实现刷新这个很重要)

项目结构如下:

4、配置webpack.config.js

const path = require('path');
module.exports = {entry: {app: ['./src/index.js']},output: {path: path.resolve(__dirname, "build"),publicPath: '/assets',filename: 'bundle.js'}
}

新建index.html引入asset/bundle.js,你在本地是看不到这个bundle.js的,它其实存在了内存中,想看编译后的代码可以去build下找

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>测试webpack</title>
</head>
<body><p id="app">我发你看的</p><script src="assets/bundle.js"></script>
</body>
</html>

在package.json里给他添加一个自定义命令 dev

{"name": "webpacktest","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --env development"},"author": "","license": "ISC","devDependencies": {"webpack": "^4.20.2","webpack-dev-server": "^3.1.9"}
}

命令添加完成,我们就可以通过npm run dev来运行项目了,用过vue-cli的同学,有没有很熟悉的感觉,哈哈

默认端口号是8080,也可是自己手动去修改端口号,在webpack.config.js中。 "dev": "webpack-dev-server --env development --port 3333"

执行这步会报错 Cannot find module 'webpack-cli/bin/config-yargs'

这是因为缺少 webpack-cli模块，需安装

npm install webpack-cli --save-dev

然后再重新执行 npm run dev

webpack搭建服务器相关推荐

webpack搭建服务器，随时修改刷新
前提:1.对webpack有一定了解,本文不做介绍 2.安装node.js 手把手操作: 1.创建一个名为webpack-server的文件夹(随便取的) 2.cd到当前文件夹:cd webpack- ...
webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
基于webpack搭建前端工程解决方案探索
关于前端工程 \\ 下面是百科关于"软件工程"的名词解释: \\ \ 软件工程是一门研究用工程化方法构建和维护有效的.实用的和高质量的软件的学科. \ \\ 其中,工程化是方法,是 ...
react打包后图片丢失_使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
Webpack搭建React开发环境
Webpack搭建React开发环境 1.React环境搭建实现React开发的三种方式: (1)使用CDN的方式 <script src="https://unpkg.com/re ...
从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...
Webpack 搭建基础 react 项目环境
现在比较火的前端框架 react 和 vue,大部分时候我们都是通过脚手架进行搭建的,对于脚手架来说有一个很重要的打包模块 webpack,使用起来确实挺方便的.对于使用脚手架来搭建项目也有弊端,如 ...
web.py搭建服务器
python搭建服务器 ------------------安装web.py------------------------ Windows10 python3.5 安装web.py问题 pip ...
前端进阶（二）webpack开发服务器环境配置
webpack开发服务器 webpack 使用 babel 处理高版本的 js 语法 babel 的介绍 => 用于处理高版本 js语法的兼容性安装包 yarn add -D babel-l ...

webpack搭建服务器

webpack搭建服务器相关推荐

最新文章

热门文章