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下生成两个文件

webpack前端构建工具学习总结(三)之webpack.config.js配置文件的更多相关文章

  1. webpack前端构建工具学习总结(二)之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  2. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  3. webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  4. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  5. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  6. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  7. 前端构建工具gulp使用 (转)

    http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...

  8. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  9. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

随机推荐

  1. RTC驱动程序分析

    drivers\rtc\rtc-s3c.c s3c_rtc_init      platform_driver_register            s3c_rtc_probe           ...

  2. 【转】Cache Buffer Chain 第二篇

    文章转自:http://m.bianceng.cn/database/Oracle/201407/42884.htm 测试环境:版本11gR2 SQL> select * from v$vers ...

  3. 2.1-2.2 HBase数据存储

    一.HBase数据检索流程 一篇介绍HBase数据读写流程的解析的博文:http://hbasefly.com/2016/12/21/hbase-getorscan/?wsfatm=uqvhl3 1. ...

  4. 2.12 Hivet中order by,sort by、distribute by和cluster by

    https://cwiki.apache.org/confluence/display/Hive/LanguageManual+SortBy 一.order by 对全局数据的排序,仅仅只有一个red ...

  5. c++中的友元重载

    1 语法 返回值类型 operator 运算符名称(形参列表) { 重载实体 } --------->operator和运算符名称在一起构造成新的函数名 2 案例 #include <io ...

  6. Fitnesse 之 Script Table

    在表中每一行代表一个执行脚本. 第一行中的Script关键字表明表格类型,后面紧跟着类名(Fixture)和构造函数中的参数.在一个测试页中如果没有再指定其它Fixture,将一直沿用上一个Fixtu ...

  7. POJ3697【BFS】

    题意: n个点的完全图,删掉m条边以后,求与1联通的点的个数. 思路: 直接判断 遍历图,n(n+1)/2=5e7 复杂度n^2......,哦,这样也行... //#include<bits/ ...

  8. Educational Codeforces Round 19 A, B, C, E(xjb)

    题目链接:http://codeforces.com/contest/797 A题 题意:给出两个数n, k,问能不能将n分解成k个因子相乘的形式,不能输出-1,能则输出其因子: 思路:将n质因分解, ...

  9. 解决element 照片墙上传时回显问题

    1.先看看样式: <el-upload class="imgList" action="1165165" list-type="picture- ...

  10. ScrollTo:实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...