webpack学习（六）

本节学习通过webpack将项目部署到服务器端，主要是依赖webpack-dev-server模块，它可以将项目打包到服务器，并可以指定端口，配置启动命令等等。
1.在项目下安装webpack-dev-server模块。

npm install webpack-dev-server@2.9.7 --save-dev

2.我们修改package.json中的scripts对象，来达到我们的效果。

*package.json*
{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "css-loader": "^3.2.0",
    "style-loader": "^1.0.0"
  },
  "devDependencies": {
    "jquery": "^3.4.1",
    "webpack-dev-server": "^2.9.7"
  },
  说明：我们在scripts里面进行一些配置
  "scripts": {
    "start": "webpack-dev-server --entry ./src/js/main.js --output-filename ./dist/bundle.js",  说明：定义了项目启动的输入输出文件
    "build": "webpack"  说明：替换一下打包命令
  },
  "author": "",
  "license": "ISC"
}

3.更换一下main.js的内容，和上节输出内容做区分，如下：

require('../css/style.css')
var tryStr = require('./subMethod.js')
var $ = require('jquery')   //直接引用jquery并赋值给$(jquery的标志符号，你也可以自己命名一个)

document.write(tryStr())

// 调用jquery方法,，进行内容，样式的更改
$('body').html('打包工具，将项目部署到服务器').css({'background-color':'#eeeeee'})

4.进行打包，注意我们刚才在package.json中配置了打包命令的另一种方式，因此我们可以用如下命令进行打包：

图1：打包

图2：运行项目

可以看到运行npm run start后，项目运行在了http://localhost:8080/，我们在浏览器输入此网址，可以看到如下内容：

图3：运行结果