当前位置: 首页 > 后端技术 > Node.js

webpack配置基础

时间:2023-04-04 00:47:29 Node.js

1:默认入口和输出最新版本的webpack已经不需要webpack.config.js作为配置文件了。如果你的项目缺少配置文件,webpack会做如下默认配置:entry-src/index.jsoutput-dist/main.js2:默认配置文件vs自定义配置文件如果项目根目录有webpack.config.js文件,那么webpack会默认将其作为配置文件使用。我们也可以在命令行通过--config指定配置文件,例如:"scripts":{"build":"webpack--configprod.config.js"}3:pathwebpakc使用自带的路径库node.js对路径的处理:constpath=require('path')你可能还会注意到这个变量:__dirname__dirname的值是当前模块的路径,这和对__filename执行path.dirname()是一样的.例如:在/Users/mjr路径下执行nodeexample.js,然后:console.log(__dirname);//Prints:/Users/mjrconsole.log(path.dirname(__filename));//Prints:/Users/mjr4:contextcontext为绝对路径,指定后续所有配置的基础路径,默认为当前项目路径。例如:/Users/xxx/study/webpack-demo/webpack.config.jsconstpath=require('path');varcontext=path.resolve(__dirname,'./');console.log(context);//Users/xxx/study/webpack-demomodule.exports={context:context,entry:'./src/index.js',output:{文件名:"main.js",path:path.resolve(__dirname,'dist')}}如果我们在当前项目中创建了一个路径test/,但是里面什么都没有,我们将配置中的上下文更改为test/路径:/Users/xxx/study/webpack-demo/webpack。配置.jsconstpath=require('path');varcontext=path.resolve(__dirname,'test');console.log(context);//Users/xxx/study/webpack-demo/testmodule.exports={context:context,entry:'./src/index.js',output:{文件名:"main.js",path:path.resolve(__dirname,'dist')}}当我们再次运行npmrunbuild时,你会得到一个错误。因为path.resolve(__dirname,'test')得到的路径是/Users/xxx/study/webpack-demo/test,所以我们把context设置为这个路径,我们的入口就是找到当前目录下的/src/index语境。js,我们知道一定找不到这个。所以,从上面的例子我们知道上下文的作用。