学习笔记 - webpack配置

webpack

webpack概念：是前端工程项目的具体解决方案。

webpack功能：

   提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、新跟那个优化等强大的功能。

webpack中的默认约定：webpack 4.x 5.x版本

    ① 默认的打包入口文件为 src -> index.js。
    ② 默认输出文件路径为 dist -> main.js。
    ③ 可以在webpack.config.js中修改约定。

webpack 中的插件：

  ① webpack-dev-server 插件
      安装 webpack-dev-server 用于监听代码的修改生成dist: 自动打包 将生成的文件存放于内存中。
          npm install webpack-dev-server@3.11.2 -D
      配置webpack-dev-server （webpack.config.js）
          修改 package.json -> scripts 中的dev 。
              "scripts": {
                "dev": "webpack serve"
              }
      访问 html 页面：
      i ｢wds｣: Project is running at http://localhost:8080/
      i ｢wds｣: webpack output is served from /

  ② html-webpack-plugin 插件 用于将 index.html 页面复制到 / 根目录下 。
      (1)安装 html-webpack-plugin 插件 npm install html-webpack-plugin@5.5.0 -D 
      配置 html-webpack-plugin （webpack.config.js）
      (2) 导入 HTML 插件 ，得到一个构造函数
      const HtmlPlugin = require('html-webpack-plugin')
      (3)创建 HTML 插件的实例对象
      const htmlPlugin = new HtmlOPlugin({
        template:'./src/index.html', // 指定原文件的存放路径
        filename:'./index.html', // 指定生成的文件存放路径
      })
      module.exports = {
        mode:'development',
        plugins:[htmlPlugin], // 通过 plugins 节点，使 htmlPlugin 插件 生效。
      }

html-webpack-plugin 插件:

   通过HTML插件复制到项目根