Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。

webpack文档:https://webpack.github.io/docs/

1.新建一个文件夹src存放打包前的源文件,dist文件夹存放打包后的文件,新建一个webpack.config.js为webpack的配置文件

打包前的文件夹中的内容

2.新建一个index1.html引用dist下打包后的js

3.输入命令:webpack,即可按照webpack.config.js中的配置项进行编译

4.编译完的文件目录和内容如下

5.如果将webpack.config.js重命名为webpack.dev.config.js,则直接执行默认的webpack命令则会找不到相应的配置文件,需要借助于webpack的--config选项来指定配置文件

命令:webpack --config webpack.dev.config.js

6.如果要查看编译的进度,打包的模块之类的,可以在package.json中的scripts标签内通过webpack的属性值来指定

7.输入命令:npm run webpack,来编译打包

 webpack.config.js中entry值的详细介绍:

https://webpack.github.io/docs/configuration.html#entry

entry的值可以是一个string类型的字符串,也可以是一个数组,还可以是一个json对象

数组:这种情况会将entry定义的数组中的文件内容打包到output中定义的这一个文件

json对象:这种情况适应于多页面时的编译

output属性值介绍:https://webpack.github.io/docs/configuration.html#output

使用命令:npm run webpack,编译打包将会看到在dist/js下生成两个文件

最新文章

  1. linux 下 ls 文件夹和文件没有颜色的解决办法
  2. PyCharm配置GitHub
  3. Ms sql pivot unpivot
  4. Using dbms_shared_pool.purge to remove a single task from the library cache
  5. A Knight's Journey_DFS
  6. mongodb 3.x WiredTiger存储优化测试
  7. This Android SDK requires Android Developer Toolkit version 23.0.0 or above
  8. Jenkin+TestNG进行自动化测试执行
  9. mongodb的固定集合(优化效率)
  10. 更改Tomcat startup.bat启动窗口名称
  11. 关于c语言的一个小bug(c专家编程)
  12. MongoDB Java Driver 3.4操作
  13. 安装jdk+tomcat
  14. div界面元素生成图片
  15. Fetch请求后台的数据
  16. repository和repertory
  17. ABAP error:CONVT_NO_NUMBER
  18. 利用npm 安装删除模块
  19. C# 无法在发送 HTTP 标头之后进行重定向
  20. 何时使用MQ ?

热门文章

  1. win10文件夹或文件已在另一程序中打开
  2. java web 工程找不到tomcat类 java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
  3. Flutter实战视频-移动电商-08.Dio基础_伪造请求头获取数据
  4. UVa 1631 Locker (DP)
  5. win7 win8 快捷键直接调出任务管理器
  6. SourceTree切换语言
  7. POJ2406【KMP-next数组】
  8. Codeforces 174B【模拟构造】
  9. Codeforces691A【读题-水】
  10. CSproject文件总是在Solution中被修改PROJECT GUID问题