Webpack入门第二节

上一节已经成功使用Webpack打包了一个文件了。在终端进行复杂的命令行操作,其实是不太方便且容易出错的,接下来看看Webpack的另一种更常见的使用方法。

通过配置文件来使用Webpack

Webpack拥有很多其它的比较高级的功能(比如loaders和plugins),这些功能都可以通过命令行模式实现,但是这样不太方便且容易出错,更好的办法是定义一个配置文件,这个配置文件其实也是一个简单的javaScript模块,我们可以把所有的与打包相关的信息放在里面。

如何写配置文件?

1.在当前项目的根目录下新建一个名为webpack.config.js的文件。

module.exports={
    entry:__dirname+"/app/main.js",//已多次提及的唯一入口文件
    output: {
        path:__dirname+'/public',//打包后文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    }
}

其文件内容如图所示,目前的配置主要涉及到的内容是入口文件路径和打包后文件存放的路径。

注:“__dirname”是node.js中的全局变量,它指向当前执行脚本所在的目录。

有了这个配置之后,再打包文件,只需在终端运行webpack(非全局安装需使用node_modules\.bin\webpack)命令就可以了,这条命令会自动引用webpack.config.js文件中的配置选项。

又学会了一种使用Webpack的方法,这种方法不用管那烦人的命令行参数,有没有感觉很爽。如果我们可以连webpack(非全局安装需使用node_modules\.bin\webpack)这条命令都可以不用,那种感觉会不会更爽~,继续看下文。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack是一个主流的前端工程化解决方案,用于打包和构建前端应用程序。它可以将多个模块和资源打包成一个或多个bundle,以便在浏览器中加载。 要使用Webpack,你可以通过安装webpack命令行工具和配置文件来开始使用。在开发环境中,可以使用cheap-module-eval-source-map配置选项来生成源映射,而在生产环境中,可以使用none选项来关闭源映射。 为了更方便地使用Webpack,你可以安装和配置一些第三方插件。其中两个常用的插件是webpack-dev-server和html-webpack-plugin。webpack-dev-server可以在代码修改后自动进行打包和构建,而html-webpack-plugin可以自定义index.html页面的内容。 如果想快速入门Webpack,你可以按照以下步骤进行操作: 1. 安装Webpackwebpack命令行工具。 2. 在项目根目录下创建一个webpack.config.js文件,并配置Webpack的入口和出口文件以及其他需要的选项。 3. 在package.json中的scripts字段中增加命令,例如"build": "webpack"。 4. 运行npm run build命令,即可实现打包。 这样,你就可以通过Webpack来打包和构建你的前端应用程序了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [超详细 WebPack 入门教程](https://blog.csdn.net/qq_43682422/article/details/124054740)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [webpack快速入门教程](https://blog.csdn.net/weixin_57218747/article/details/117304221)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值