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. 写出高效优美的单片机C语言代码

    程序能跑起来并不见得你的代码就是很好的c代码了,衡量代码的好坏应该从以下几个方面来看 1,代码稳定,没有隐患. 2,执行效率高. 3,可读性高. 4,便于移植. 下面发一些我在网上看到的技巧和自己的一 ...

  2. Whitelabel Error Page异常

    做了个简单的springboot项目,一开始所有运行正常,之后写了一天的代码,再运行相同的代码,就一直报以下异常: Whitelabel Error Page This application has ...

  3. Jmeter调用JAVA jar包传参

    http://blog.csdn.net/xiazdong/article/details/7873767#

  4. webpack 4 基础知识点梳理

    目录 webpack安装 webpack配置文件 webpack核心概念 entry output loader plugins sourceMap webpack-dev-server 跨域 &am ...

  5. CodeForces599D【数学】

    题意: 给出一个x,求有多少个矩阵中满足存在x个不同的正方形. 思路: (数学渣+推理渣) #include<bits/stdc++.h> using namespace std; typ ...

  6. [Xcode 实际操作]二、视图与手势-(11)UITapGestureRecognizer手势之长按

    目录:[Swift]Xcode实际操作 本文将演示使用视图的长按手势,完成视图的交互功能. import UIKit class ViewController: UIViewController { ...

  7. 计算机网络自顶向下方法第2章-应用层(application-layer).1

    2.1 应用层协议原理 2.1.1网络应用程序体系结构 1)在客户-服务器体系结构 (client-server architecture)中,有一个总是打开的主机称为服务器,它服务于来自许多其他称为 ...

  8. 结束线程方法2 Java提供的中断机制

    package com.mozq.thread.interrupt; /** * 注意:调用interrupt()方法,并不会结束线程. * 结束线程的语义:需要我们自己使用3个中断方法构建. * * ...

  9. 利用arguments对象在javaScript中实现重载(overload)

    一些概念: 重载(overload): 什么是: 相同函数名,不同参数列表的多个函数,在调用时,可根据传入参数的不同,自动选择对应的函数调用! 为什么: 减轻调用者的负担,一个函数名,可执行多种操作 ...

  10. 使用express+mongoDB搭建多人博客 学习(5)权限控制

    修改index.js如下: var express = require('express'); var router = express.Router(); var crypto=require('c ...