webpack前端构建工具学习总结(三)之webpack.config.js配置文件
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配置文件的更多相关文章
- webpack前端构建工具学习总结(二)之loader的使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- 前端构建工具gulp使用 (转)
http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...
- 前端构建工具之gulp(一)「图片压缩」
前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...
- 前端构建工具gulpjs的使用介绍及技巧
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
随机推荐
- KNN分类算法--python实现
一.kNN算法分析 K最近邻(k-Nearest Neighbor,KNN)分类算法可以说是最简单的机器学习算法了.它采用测量不同特征值之间的距离方法进行分类.它的思想很简单:如果一个样本在特征空间中 ...
- tomcat+mysql+javaweb+docker
1.安装好docker 2.docker pull tomcat docker pull mysql 3.docker run -it -p 8080:8080 --rm tomcat:7.0 #-i ...
- 201621123016 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...
- API网络接口
1.天气 文章:http://segmentfault.com/a/1190000002607883 地址:http://api.lib360.net/open/weather.json?city=北 ...
- [Xcode 实际操作]七、文件与数据-(22)使用OCR光学字符识别技术识别银行卡号码
目录:[Swift]Xcode实际操作 本文将演示如何使用光学字符识别技术,识别信用卡上的卡号. OCR技术是光学字符识别的缩写(Optical Character Recognition), 是通过 ...
- [Xcode 实际操作]九、实用进阶-(12)从系统相册中读取图片
目录:[Swift]Xcode实际操作 本文将演示从系统相册中读取图片. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //添加两个协议 ...
- load View 流程 程序启动流程
基本流程: loadView / nib文件 来加载view到内存 -> viewDidLoad 函数进一步初始化这些view -> 内存不足时, 调用viewDidUnload 函数释 ...
- Libre OJ P2332「JOI 2017 Final」焚风现象【差分思想】By cellur925
题目传送门 这道题开始看起来会很晕...\(qwq\).首先我们要明确题目中的海拔&&温度.温度是受海拔影响的,每次改变的是海拔,我们求的是温度. 我们开始读入的时候便可以处理出开始\ ...
- Java反射学习笔记01
- Eclipse - 安装了jd-eclipse插件后依然无法反编译类文件
问题 Eclipse在安装了jd-eclipse插件后依然无法反编译类文件,这个问题是因为没有修改默认的类文件查看器. 解决方法 修改默认的类文件查看器为jd-eclipse Window -> ...