webpack中devServer的配置及使用

配置webpack.config.js

代码块

const path = require('path')
module.exports = {
    // 指定打包文件的入口和出口
    entry: path.join(__dirname, './src/main.js'), //入口文件，__dirname表示绝对路径
    output: { //输出文件的相关配置
        path: path.join(__dirname, './dist'), //路径
        filename: 'bundle.js', //文件名称
    }
}

说明
1、在项目根目录中创建webpack.config.js文件
2、module.exports是node.js语法意义为向外暴露一个模块，用var 变量名称=require(‘模块标识符’)接收。
3、直接在项目终端中使用命令：webpack打包

devServer的配置

 "dev": "webpack-dev-server --open --port 3000 --hot"

安装

npm i -D webpack-dev-server

说明
1、使用npm run dev调用，可以自动打开网页，并且事实监听数据变化
2、open意为打开，port意为端口号，hot意为热更新
3、代码写在package.json中的"scripts"对象下面
4、json文件不能写注释，且不能使用单引号。
5、运行npm run dev会在项目根目录出生成一个bundle.js，因为是放在内存中，所以看不见，但是可以引用，因此需要改为引用根目录的bundle.js文件

扩展

说明
在上一个devServer的配置中我们还需要在index.html中引入根目录生成的js文件，其实我们可以使用工具省略下面这一步。

<script src="/bundle.js"></script> 

使用html-webpack-plugin插件

安装

cnpm i html-webpack-plugin -D

导入

const htmlWebpackPlugin = require('html-webpack-plugin')

配置

plugins: [ //这是用来处理插件的
        new htmlWebpackPlugin({ //创建一个在内存中生成html的实例
            template: path.join(__dirname, './src/index.html'), //指定生成的模板页面
            filename: 'index.html'
        })
]

解释
导入和配置都写在webpack.config.js文件中plugins需要定义在module.exports中。