webpack5基本配置及html-webpack-plugin和webpack-dev-server使用（二）

1、初始化 npm init，生成package.json文件

2、安装 npm webpack webpak-cli html --save-dev

–save-dev开发过程中需要使用的一些文件，在项目最终运行时是不需要的,简写-D，将模块名和版本号添加到devDependencies部分
–save 在线上环境运行时会将包安装，将模块名和版本号添加到dependencies部分

3、创建webpack.config.js

3.1基本配置

const path = require('path')
module.exports = {
    mode:'development',//production生产环境  development开发环境
    entry:'./src/index.js',//入口
    output:{
        filename:'bundle.js',//打包后的文件(如果想加让打包出来的文件都不一样，可以加hash，	 bundle.[hash].js)
        path:path.resolve(__dirname,'dist')//路径必须是绝对路径
    },
    module: {},
    plugins:[]
}

npx webpack //运行webpack

3.2安装html-webpack-plugin，生成HTML文件，并将打包后的js文件插入到HTML中

命令：npm html-webpack-plugin -D

//配置webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
     new HtmlWebpackPlugin({
        template:'./public/index.html',
        filename:'index.html',
        hash:true,//true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。主要用于清除缓存,同时需要将output中的filename设置成bundle.[hash].js
 	})
 ]

3.3 安装webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务
命令：npm webpack-dev-server -D

//配置webpack.config.js
devServer:{//开发服务器配置
      port:3000,//设置端口号
      progress:true,//进度条
      contentBase:'./dist' //服务器访问基本目录
      open：true//自动打开页面
  }
//配置package.json
"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
 }

运行npm run build 进行打包
运行npm run dev 启动服务