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下找

  
  
  
  


  
我发你看的
  

在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