webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice

webpack实践(一)- 先入个门

《webpack实践(二)- webpack配置文件》

《webpack实践(三)- html-webpack-plugin》

《webpack实践(四)- html-webpack-plugin》

一.前言

  前面一篇文章中,我们总结了webpack的安装,并使用webpack提供的cli打包一个简单的index.js文件。

  本节将使用webpack配置文件的方式去打包一个文件。

二.使用配置文件打包

1.新建配置文件并写入代码

  首先我们需要新建一个配置文件:webpack.config.js(可以起别的名称,后面会提到)

  备注:在此之前已经删除了上一节中使用cli打包的index.bundle.js结果文件

  

   现在呢,我们可以按照官方文档提供的示例编写的我们的配置文件

var path = require('path');

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

  这个配置文件呢,实际上就是上一节我们的打包命令webpack index.js -o index.bundle.js --mode=development的一个配置文件表现形式。

  里面具体的配置稍后会讲,我们先使用这个配置文件打包一下,在验证一下是否和上一节的结果相同。

2.执行打包命令

  使用配置文件的打包命令为:webpack --config 配置文件路径和文件名

假如我们的配置文件就在项目根路径下,而且文件名为webpack.config.js,那么就可以省略--config参数直接使用webpack命令进行打包。

  因为直接运行webpack命令,webpack会默认在当前目录下查找文件名webpack.config.js的文件作为打包时使用的配置文件。

  

3.查看打包结果

  

  可以看到目录下有新生成的index.bundle.js结果文件。其内容和上一节的完全一致,所以我们不贴代码了,直接验证一下打包结果。

4.验证打包结果

  上一节的index.html文件我们没有做改动,因此直接在浏览器中访问index.html

  

  和上一节是一致的效果。

  接着我们解读一下webpack.config.js中的各项。

三.配置文件

1.mode

  首先是mode这个配置,它表示对当前的环境的一种配置。它有两种配置:

mode: "development"   #开发环境
mode: "production" #生产环境

  当我们不配置这个选项的时候,其默认值为production。那这两种配置最直观的不同之处就在于开发环境的代码不提供代码和命名的压缩,而生产环境提供代码和命名压缩。

  一般当我们处于项目开发阶段时,可以将该选项配置为development,当产品发布上线后将该选项配置为production。

2.entry

  entry配置有也有多种定义方式,这里我们只介绍两种:单入口语法、单入口对象语法。

  单入口语法

    单入口的基本语法:entry: string|Array<string>

    我们本次示例中的配置就是使用单入口语法进行配置的。

entry: './index.js',

  单入口对象语法

    对象的基本语法:entry: {[entryChunkName: string]: string|Array<string>}

    我们将上面的单入口配置改写一下

entry: {
main: './index.js'
},

  备注:entry配置的形式较多,需要根据实际的项目需求去编写代码,本篇只做简单讲解。后续会系列文章会慢慢补充。

3.output

  output配置项表示web程序的输出配置。

  path

    path需要配置一个字符,它表示输出的绝对路径。

    一般项目中,输出的结果文件需要放到一个统一的目录下,此时我们可以将path稍作修改

path: path.resolve(__dirname,'dist'),

    此时path的值为当前项目目录下的dist,现在项目根目录下运行webpack命令重新打包一下

    可以看到,打包完成后生成了dist目录,在该目录下生成了最终的打包结果index.bundle.js。

     备注:后续的path配置就这样配置,比较符合平时的项目开发。

  filename

    filename需要配置传入一个字符串,表示输出的文件名,这个文件最终会写入path指定的路径下。

    我们的示例比较简单,入口为单文件,所以输出也为单文件。

四.总结

  本篇主要将上一篇文章中命令行式的打包方式转化为webpack配置文件的打包方式,并且简单的讲解了该配置文件中的几个配置项。

  


  

webpack实践(二)- webpack配置文件的更多相关文章

  1. webpack教程(二)——webpack.config.js文件

    首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugi ...

  2. (webpack系列二)webpack打包优化探索

    虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条 ...

  3. webpack实践总结

    一.Loader写法及执行顺序 从webpack2起,loader的格式如下: module: { rules: [ {test: /\.css$/, use: ['style-loader','cs ...

  4. webpack实践(一)- 先入个门

    一.前言   webpack是个啥呢?看官网的这段描述. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)   在我以前做纯html.css. ...

  5. webpack实践(三)- html-webpack-plugin

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  6. webpack实践(四)- html-webpack-plugin

    webpack系列博客中代码均在github上:https://github.com/JEmbrace/webpack-practice <webpack实践(一)- 先入个门> < ...

  7. 深入学习webpack(二)

    深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...

  8. 深入理解webpack(二) webpack-dev-server基本配置

     摘要:webpack-dev-server是一个使用了express的Http服务器,它的作用主要是为了监听资源文件的改变,该http服务器和client使用了websocket通信协议,只要资源文 ...

  9. npm scripts + webpack 实践经验(React、Nodejs)

    最近用Webpack+npm scripts+Mongodb+Nodejs+React写了个后台项目,在用Webpack构建过程中遇到了许多坑,就写出来分享一下. 构建工具五花八门,想当年刚学会Gru ...

随机推荐

  1. electron——dialog(实现导出excel)

    背景 前端点击导出excel按钮后,请求完需要导出的数据后发送给主进程electron,由主进程保存到本地 dialog 显示用于打开和保存文件.警报等的本机系统对话框. dialog 模块提供了ap ...

  2. IPv6,无需操作就可升级?

    最近这段时间,5G 出现在你能看到的各种信息里,铺天盖地的宣传提醒着大家新一代互联网的到来.其实早在几年前 5G 就有所提及,可是为什么到现在才开始窜上热门呢?这就涉及到了 IPv6. 或许有不少朋友 ...

  3. Head First设计模式——适配器和外观模式

    前言:为什么要一次讲解这两个模式,说点骚话:因为比较简单(*^_^*),其实是他们两个有相似和有时候我们容易搞混概念. 讲到这两个设计模式与另外一个“装饰者模式”也有相似,他们三个按照结构模式分类都属 ...

  4. python3 之 面向对象(类)、继承、派生和多态

    类提供了一种 组合数据和功能 的方法.创建一个新类意味着:创建一个新 类型  的对象,从而允许创建一个该类型的新 实例. 每个类的实例可以拥有: 保存自己状态的属性. 一个类的实例也可以有改变自己状态 ...

  5. Github远程库与Git本地库连接

    Github远程库与Git本地库连接 以下有任何[]符号只是将内容扩起,输入命令不需要将[]加入 创建SSH Key 用户主目录有.ssh->id_rsa和id_rae.pub->直接跳过 ...

  6. 【集训Day1 测试】【USACO】照相

    照相(fairphoto) [题目描述] 有N 头奶牛站在一条数轴上,第 i 头奶牛的位置是 Pi,奶牛不会重叠站在同一个位置, 第i 头奶牛的颜色是 Ci,其中 Ci 要么是字符'G'要么是字符'H ...

  7. yum运行报错:libcurl.so.4: cannot open shared object file: No such file or directory

    /usr/lib64/目录下存在libcurl.so.4文件 CURL的动态库找不到,这里我们加入到ld.so.conf [root@localhost bin]#  vim /etc/ld.so.c ...

  8. Java基础面试题及答案(四)

    反射 57. 什么是反射? 反射主要是指程序可以访问.检测和修改它本身状态或行为的一种能力 Java反射: 在Java运行时环境中,对于任意一个类,能否知道这个类有哪些属性和方法?对于任意一个对象,能 ...

  9. 转帖:30多条mysql数据库优化方法,千万级数据库记录查询轻松解决

    地址:http://www.ihref.com/read-16422.html

  10. 记一次 Java 项目 CPU 占用久高不下故障处理

    事件背景 公司对接了新系统,代码变动很大,项目也很急,于是在上线之后 Zabbix 不时就告警,提示 CPU 使用过载,告警消息类似如下: 一开始以为是系统停机升级,所有人都等着使用系统,导致系统处理 ...