webpack3-[webpack-dev-server]的使用

---

搭建项目

1. webpack-dev-server有什么用？
   可以用来自动打包编译

2. 通用步骤
   npm init -y
   npm i webpack --save-dev
   npm i webpack-cli --save-dev
   npm i jquery -d

3. 安装 webpack-dev-server
   npm i webpack-dev-server --save-dev

4. 在 package.json 中的 scripts 中添加
   “dev”: “webpack-dev-server”

5. 编写js和html
   html中引入js的路径为 /xxx.js

6. 编写配置文件 webpack.config.js
   const path = require(“path”)
   module.exports = {
   entry: path.join(__dirname, ‘./src/js/demo.js’),
   output: {
   path: path.join(__dirname, ‘./dist’),
   filename: “demo.js”
   },
   mode: “development”
   }

7. 启动 webpack-dev-server
   npm run dev

8. 注意：webpack-dev-server打包编译后的文件在内存中

---

webpack-dev-server的常用命令

1. –open ：自动打开浏览器
2. –port 端口号 ：设置端口号，默认为8080
3. –contentBase 文件夹名 ：指定托管的根目录
4. –hot ：热部署，以打补丁的方式打包文件。在css中能以不刷新整个页面来更新样式
5. –config 配置文件名.js ：设置配置文件，若不配置这个，则默认配置文件为根目录下的webpack.config.js

1.通过"dev": "webpack-dev-server --open --contentBase src --hot"方式

2.通过配置文件的方式"dev1": “webpack-dev-server [–config 配置文件名.js]”

本例使用：webpack.config.js配置文件

const path = require('path')
const webpack = require('webpack')  // 2.要使用hot，需要webpack包

module.exports = {
    entry: path.join(__dirname, './src/js/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: "index-bundle.js"
    },
    mode: "development",
    devServer: {
        open: true,
        contentBase: 'src',
        port: 3002,
        hot: true   // 1.要使用hot，首先将hot设置为true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()    // 3.要使用hot，需要new webpack.HotModuleReplacementPlugin()对象
    ]
}

---

更新时间：2019-12-30