webpack项目创建步骤

1、在项目根目录运行 npm init -y 命令快速初始化项目

2、在项目根目录创建 src 源代码目录和 dist 产品目录

3、在src目录下创建index.html文件

4、使用npm安装webpack,webpack-cli, 执行如下命令即可

  npm i webpack webpack-cli -D

5、项目根目录下新建webpack.config.js文件，进行相关配置

  module.exports = {
    mode: 'development',      // mode, 有development和production 开发模式和生产模式两种
    // entry: './src/index.js'   // 入口文件配置，可不进行配置，约定默认指向src目录下的index.js 文件，也可自定义配置
   }

6、执行命令 webpack 项目即进行webpack打包，会在dist目录下自动生成main.js文件，在src目录下index.html文件中引入该main.js文件即可生效

  webpack
  
 // 在每次修改代码后都需要执行 webpack 命令重新打包后才可生效，我们一般希望每次修改代码保存后就可打包完成，而不是每次都需要执行 webpack命令，由此引入 webpack-dev-server 插件

7、webpack-dev-server 实时打包

webpack-dev-server 打包好的main.js是托管到了内存中，所以在项目中有一个看不见的main.js

安装webpack-dev-server,执行如下命令

  npm i webpack-dev-server -D

在package.json文件中做如下配置

    "scripts": {
      "dev": "webpack-dev-server"
    }

做完上述配置即可运行 npm run dev 命令启动项目，运行在 localhost:8080,这时index.html文件中js文件引入应改为 <script src="/main.js"></script> 根目录下那个看不见的main.js

这时想访问index.html文件需要访问地址 localhost:8080/index.html,我们希望localhost:8080地址能够直接访问到index.html 则需要借助 html-webpack-plugin

webpack.config.js

  const path = require('path')      // 引入path 模块，后续会用到
  const HtmlWebpackPlugin = require('html-webpack-plugin') // html-webpack-plugign 是node 中的一个模块，可直接用require引入
  然后创建 HtmlWebpackPlugin 的实例对象
  const htmlPlugin = new HtmlWebpackPlugin({
        template: path.join(_dirname, './src/index.html')，      // 源文件模板，这里指向src下的index.html
        filename: 'index.html'      // 生成内存中的首页名称
  })
  plugins: [htmlPlugin] // 插件放到webpack.config.js的配置对象中

这时再运行 npm run dev 即可在localhost:8080中访问到index.html的内容