用户登录

webpack 的配置文件是 webpack.config.js ,你可以在项目的根目录下去创建一个这样的文件,然后在里面可以描述一下让 webpack 做的一些事情 ..

下面我们就去创建一个这样的配置文件 .. 新建文件 .. 名字是 webpack.config.js .. 里面用一下 module.exports .. 导出一个对象 .. 先指定一下 entry .. 也就是要打包的入口文件 .. 我这里就是当前目录下的 entry.js 这个文件 ..

再添加一个 output 属性 .. 在它的里面就是打包以后生成的文件要放到哪里,叫什么 .. 它的值是一个对象 .. 里面先用一个 path 属性,指定一下文件的存储位置 .. 这里用一下 __dirname .. 表示跟这个文件在同一个目录的下面 .. 然后是 filename 属性 .. 它可以指定一下生成的文件的名字 .. 这里设置成 bundle.js ..

这就是一个 webpack 配置文件最基本的东西 ..

另外我们在项目里又使用了一下 style 还有 css 这两个 loader 去处理项目里用的 css 文件 .. 在这个配置文件里可以再去配置一下 .. 添加一个 module 属性 .. 表示要使用的模块 ..

在它里面添加一个 loaders .. 设置一下要使用的 loader ... 它的值是一个数组 .. 每个项目是一个对象 .. 添加一个 test 属性 .. 它的值是一个正则表示式 .. 意思就是看看文件的扩展名是不是 css .. 再用一个 loader 属性设置一下具体要使用的 loader .. 用一下 style .. 还有 css 这两个 loader ..

保存 .. 因为我们在配置文件里设置了一下处理 css 文件要使用的 loader .. 所以在这个 entry.js 里面,导入 css 文件的时候,就不需要指定处理它的 loader 了 .. 这里还少了一个分号 ... 保存一下 ..

回到命令行 ... 这次我们只需要在项目的根目录下执行一下 webpack 这个命令 .. 因为相关的配置我们在它的配置文件里都描述清楚了 ..

配置文件:webpack.config.js《 webpack:模块打包 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点