Webpack4——配置自启动文件

上节介绍了如何打包一个文件,但是那种方式不符合日常开发习惯,这节介绍一下如何配置自启动文件。

  1. 首先在项目的根目录新建一个webpack.config.js文件

    《Webpack4——配置自启动文件》 新增webpack.config.js

  2. webpack.config.js的配置如下

    《Webpack4——配置自启动文件》 配置

    这里涉及到了Webpack四大核心模块中的两个:entry和output
    2.1 entry模块
    这里定义了核心的输入文件,也就是npm init时我们自定义的文件
    2.2 output模块
    定义了输出的目标文件,也就是dist目录下的app.bundle.js文件

  3. 此时,在命令行输入webpak即可自动匹配webpack.config.js里的信息来打包
    《Webpack4——配置自启动文件》 Webpack打包
  4. 更加符合习惯的打包方式
    修改package.json文件

    《Webpack4——配置自启动文件》

    也就是将scripts里的内容改变为:

"scripts": {
  "dev":"webpack -d --watch",
  "prod":"webpack -p"
},

现在只需要运行 npm run dev 即可打包了(这里是自动监控变化)

《Webpack4——配置自启动文件》 npm run dev 自动打包

运行 run run prod 表示生产环境下的(压缩后)

  1. 这里有一个问题,如图:

    《Webpack4——配置自启动文件》 problems

    此工具的名称叫:html-webpack-plugin

    原文作者:前端开发
    原文地址: https://www.jianshu.com/p/b1f6e9af6a1e
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞