欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Webpack入门第二节

程序员文章站 2022-03-06 13:53:57
...

上一节已经成功使用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)这条命令都可以不用,那种感觉会不会更爽~,继续看下文。

相关标签: webpack