webpack-dev-sever 搭建一个服务器

最新推荐文章于 2025-04-30 13:00:00 发布

baian5334

最新推荐文章于 2025-04-30 13:00:00 发布

阅读量124

点赞数

文章标签： webpack javascript json ViewUI

原文链接：http://www.cnblogs.com/muzhang/articles/9964961.html

版权

【初识版】

本文档node环境搭建不介绍。

一、什么是webpack？

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

此外，webpack还可以做为项目开发在管理工具，纳入到项目开发的“主体过程”。

二、开始简单搭建一个服务

2.1、目录结构如下

三、执行步骤

3.1、新建一个工程目录，假设叫app（空文件夹）

3.2、定位到(node)目录后，执行npm init，创建package.json。

3.3、创建webpack.config.js\dist\src\assets\build\和src/index.js\index.html,此处创建内容为非必须，可根据实际进行改进。

3.4、index.js代码如下

var el = document.getElementById('app');
el.innerHTML = '别死老经!';

3.5、index.html代码如下

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

3.6、package.json配置如下（注意红色）

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

3.7、webpack.config.js代码如下

const path = require('path'); //node的路径模块
module.exports = {
  entry: {
    app: ["./src/index.js"] //入口文件
  },
  output: {
    path: path.resolve(__dirname, "build"),//输出位置
    publicPath: "/assets/",//指定资源文件引用的目录 
    filename: "bundle.js"//输入文件
  },
  devServer: {
		port:6622 
	},
}

四、测试允许 npm run server

五、小结

这是一个很简单在过程，是学习在开始。

转载于:https://www.cnblogs.com/muzhang/articles/9964961.html