前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2-4 使用webpack的配置文件

2-4 使用webpack的配置文件

作者头像
love丁酥酥
发布2019-05-21 11:38:28
5350
发布2019-05-21 11:38:28
举报
文章被收录于专栏:coding for love

1. 简介

webpack打包是根据配置文件来执行工作的。

2. 默认配置

之所以直接执行npx webpack index.js就能打包成功,是由于webpack内置了配置文件。 尝试直接运行npx webpack会报错,因为webpack不知道打包的入口文件是啥。但其实一个项目的入口文件是极少有变动的,每次都写很麻烦。有没有什么办法呢?

3. 修改配置文件

webpack默认读取的用户配置文件名叫做webpack.config.js。如果根目录下有这个文件,就会默认走这个文件,否则,会启用内置的配置。

代码语言:javascript
复制
const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    }
}

此时再运行npx webpack命令就可以正确生成打包后的文件了。 然后整理一下文件夹,将源文件放到src目录下。如图:

image.png

修改webpack.config.js如下,

代码语言:javascript
复制
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    }
}

再次运行命令,一样是ok的。

4. 打包命令

实际上,我们可以利用npm脚本来自动执行命令。在package.json加上如下一行:

代码语言:javascript
复制
  "scripts": {
    "build": "webpack"
  }

然后运行npm run build。scripts中不需要额外再写npx,会自动从node_modules中去找寻指定执行文件。 总结一下webpack的打包命令方式:

  1. 全局安装webpack时可以直接运行webpack
  2. 项目内安装时可以运行npx webpack
  3. 不管全局安装还是项目内安装都可以使用脚本命令,会优先从node_module中执行命令文件。 第三种无疑是最方便的,尤其是命令行包含了很多配置操作,导致命令很繁琐时。

5.作业

https://webpack.js.org/guides/getting-started

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.05.20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 简介
  • 2. 默认配置
  • 3. 修改配置文件
  • 4. 打包命令
  • 5.作业
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档