很久没有发文章了，但是强调一点，大～熊同学最近可没闲着。学习算法，复习计算机网络，也顺便学习了一下webpack，看了看操作系统（没办法，都没学，要是不学连实习笔试都过不了，伤心～～）。本来比较纠结是写关于算法的文章呢还是关于webpack的呢。最终决定写关于webpack 的，一方面，虽然刚刚开始学习webpack，但是他的特性让人感觉非常爽，然我有一种想分享的冲动;另一方面，算法要写公式，这个编辑器貌似不太好编辑，截图也比较麻烦。废话不说了，这篇文章介绍webpack的四个核心配置项。我写的不好，你可以参考：中文文档、英文文档。当然看看我写的也是可以的。

1、建立测试项目并安装webpack

　　　　　　

　　

　　（1）建立项目目录：mkdir WP

　   （2）进入项目目录：cd WP

　　（3）用npm init建立package.json文件（随便起一个名字，一路回车就好）

　　（4）安装webpack：npm install --save-dev webpack

　　（5）测试是否安装成功，法现webpack -v找不到命令，直接在package.json的scripts加上 "webpack": "webpack"，然后运行npm run webpack -v 结果正确

　　（6）建立源文件目录：mkdir src

　　（7）用编辑器打开项目：subl .

　      　至此，准备工作完成，我们得到的的项目目录和package.json文件如下所示：

　　  （写了半天，发现插入一段代码后不能到下一行了，按了几次CTRL+Z, 居然回到这里了，真无语，再来一次）

2、entry和output的使用

　　为了测试先建立如下项目结构

　　

　　各个文件内容如下：

//index.js

import A from './js/test.js';

function hello(){

    console.log("hello");

    console.log(A);

}

hello();

//index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>This is for webpack study</title>

</head>

<body>

    <h1>祝大家发财</h1>

</body>

</html>

//webpack.config.js

const path = require("path");

module.exports = {

    entry:"./src/index.js",

    output:{

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

        filename:"bundle.js"

    },

    // module:{},

    // plugins:{}

}

　　直接终端运行一下：

　　打开项目看一下：

　　发现生成了一个dist目录，里面多了一个bundle.js的文件，查看bundle.js发现下面有我们index.js中的内容（这个是之前截的图，有点不一致了）。假如我们在index.js声明依赖会如何。先在js目录下建一个test.js 文件，内容如下：

const A = "大～熊最帅！";

export default A;

　　然后在index.js中声明对它的依赖

import A from './js/test.js';

function hello(){

    console.log("hello");

    console.log(A);

}

hello();

　　打包一下：

　　发现生成了一个bundle.js,然后有两个文件。查看bundle.js会发现，test.js中的内容也加到里面了。下面在index.html中加上：

<script type="text/javascript" src="../dist/bundle.js"></script>

预览如图：

　　

　　发现引入一个bundle.js就相当于index.js和test.js都进来了，可以正常使用。 通过这样一个简单的例子相信你已经感受到了webpack的强大之处，下面详细介绍entry和output两个属性的多种用法。

　　（1）entry：entry指定打包入口，可以是一个字符串，也可以是一个字符串数组，还可以是一个对象。

　　 A、指定一个字符串的情况上面已经提到了，它适用于单入口的情况。

　　 B、指定一个字符串数组。

　　在src目录建立index2.js，并修改配置文件，见下：　　

//index2.js

function index2(){

    console.log("this is index 2");

}

index2();

//webpack.config.js

const path = require("path");

module.exports = {

    entry:["./src/index.js","./src/index2.js"],

    output:{

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

        filename:"bundle.js"

    },

    // module:{},

    // plugins:{}

}

　　打包一下

　　

　　可以发现我们生成的内容有点不一样，3后面有个multi，这里从多个入口触发检查依赖生成了一个chunk。当你的index2.js和index.js是互不依赖，而你又想把他们打包到一起，那么这种方式正是你需要的。的。下面检查一下生成的bundle.js是什么样子。

　　

　　C：entry值为一个对象的情况

　　第一种情况，只有一个键值，这和A情况是一样的。

const path = require("path");

module.exports = {

    entry:{

        main:"./src/index.js"

    },

    output:{

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

        filename:"bundle.js"

    },

    // module:{},

    // plugins:{}

} 

　　第二种情况，多个键值对。　　

const path = require("path");

module.exports = {

    entry:{

        main:"./src/index.js",

        second:"./src/index2.js"

    },

    output:{

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

        filename:"[name]-bundle.js"

    },

    // module:{},

    // plugins:{}

}

　　注意我这里改了一下output,否则报如下错误：

　　

　　按照我的修改做结果是：

　　可以发现生成了两个chunk，文件名字分别为main-bundle.sj和second-bundle.js,chunk名字分别为main、second。如果要将从多个入口文件打包的东西放到不同的文件，那么此款适合你。关于那个output是什么意思，马上开讲。

　　（2）output基本用法

　　output有很多属性可用，这里列举几个最最常用的属性。

  • path:指定一个绝对路径，表示生成的chunk应该放在哪里。一般这样就可以了path:path.resolve(__dirname,'dist')，这个表示生成项目根目录下dist目录的绝对路径
  • filename:指定生成的chunk的文件名字。里边可以有一些特殊值

　　[name]:表示你在entry指定入口时的那个键，上面的是main和second

　　[hash]:表示当次打包的一个标识，修改之后在打包会变化，一次打包的不同chunk的值相同

　　[chunkhash]:表示每一个chunk的唯一标识，显然不同chunk是不一样的，当某个chunk里的东西改变时二次打包他的chunkhash才会改变，否则保持不变

　　[id]:表示chunk的编号，上面是0和1　　

　　以下重点看看那hash和chunkhash

　修改index.js再打包

　　　

　　发现我们只改了一个index.js,另外一个的hash也变了。

　　下面将配置给为[chunkhash]

const path = require("path");

module.exports = {

    entry:{

        main:"./src/index.js",

        second:"./src/index2.js"

    },

    output:{

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

        filename:"[name]-[chunkhash]-bundle.js"

    },

    // module:{},

    // plugins:{}

}

　　打包一次然后修改index.js再打包一次结果如下：

　　

　　发现只有我们修改的文件对应的chunk的chunkhash发生了改变，那个second并没有改变。使用chunkhash可以有效利用缓存，不用全部重新下载。比如，你上线了一个应用，已经被很多用户访问，这时在他们的浏览器有缓存，如果你修改了一个文件，再次上线，如果用chunkhash，只有你该过的那个chunk的文件名会变，其他的文件缓存还可以用，加快了加载速度。如果用hash的话，所有的文件名都会改变，所有文件都得重新下载，这是不好的。

3、plugins属性的用法

　　你可能已将注意到了，src中的html文件并没有到dist目录中去。如果我们直接在dist中建立html文件，由于我们的chunk的文件名是变化的，每一次改变都要重新调整引入。下面介绍HtmlWebpackPlugin这款插件来解决这个问题，以此了解plugins配置项。

　　（1）安装

　　

　　（2）配置

const path = require("path");

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{

        main:"./src/index.js",

        second:"./src/index2.js"

    },

    output:{

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

        filename:"[name]-[chunkhash]-bundle.js"

    },

    // module:{},

    plugins:[

    new HtmlWebpackPlugin({

        template:"./src/index.html"

    })

    ]

}

　　（3）打包

　　　　

　　发现生成了一个index.html文件。

　　（4）看效果

　　

　　这里有一个文件找不到，是因为我们的src文件夹下的index.html引入了一个bundle.js但是现在没有这个东西了，去掉就好。

　　HtmlWebPlugin插件还有比较多的配置项，也还具备很强大的功能，详情见官网，这里只是抛砖引玉。

4、module配置项

　　module配置项是用来指定loader的，loader实质上是用来对我们的资源进行预处理的工具，便于webpack将他们当成模块。下面以babel-loader为例讲解这个配置项。

　　（1）安装（截图时还没装完）

　　

　　（2）配置

　　

const path = require("path");

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry:{

        main:"./src/index.js",

        second:"./src/index2.js"

    },

    output:{

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

        filename:"[name]-[chunkhash]-bundle.js"

    },

    module:{

        rules: [

            {

              test: /\.js$/,

              exclude: /(node_modules|bower_components)/,

              use: 'babel-loader',

              options: {

                presets: ['es2015']

              }

            }

          ]

    },

    plugins:[

    new HtmlWebpackPlugin({

        template:"./src/index.html"

    })

    ]

}

　　（3）打包

　　 

　　（4）看效果（这里从打包后生成的文件看效果）

　　

　　看到第79行，我们源文件是const但是这里变成了var。babel-loader的工作就是将新标准的新特性转换成浏览器支持的写法，因为这些新特性可能还不被浏览器支持，有了这样的转化，我们就可以肆无忌惮（这个词用的很棒）的使用新特性了。比如这里我们用到了es6的新特性const，babel帮我们转成了var，这样所有浏览器都支持了。

　　我们来看一下module这个配置。这个对修有一个rules属性（2.X版本），rules是一个数组，里边可以定义一系列的处理规则，每一个是一个对象。每一个规则包含一些配置项，核心有test指明对什么文件应用这个规则，use指定处理的loader名字，如果有多个loader可以是一个数组。options是提供一些配置项。还有像exclude等等等诸多配置项，你可以去官网查阅，这里不作展开，点到为止。

5、小结一下

　　webpack是一款非常非常强大的模块化工具，她彻底颠覆了传统的局部思维模式，而是将我们项目看作一个整体，有效的帮助我们解决各种依赖问题，解决各种资源的转换问题。本文用几个简单的例子讲解了webpack的四大核心配置项的基本用法，仅作抛砖引玉之用，webpack十分强大，有丰富的loader和plugin可供我们使用，本文介绍的内容只是其冰山一角。更多信息请参考官网。

　　最后，如果你觉得大～熊同学写的文章对你有所启发，请关注一下，他和他的哆啦A梦都会很开心的！！！

　　参考：

webpack你值得拥有-从四个核心配置谈起的更多相关文章

  1. webpack的四个核心概念介绍

    前言 webpack 是一个当下最流行的前端资源的模块打包器.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后 ...

  2. webpack 四个核心概念

    webpack 是当下最热门的前端资源模块化和打包工具.它可以将许多松散的模块(如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.Coffeescript. LES ...

  3. 第四十八篇：webpack的基本使用(二) --安装和配置webpack-dev-server插件

    好家伙, 1.webpack中的默认约定 默认的打包入口文件为src  -->index.js 默认的输出文件路径为dist -->main.js 既然有默认,那么就说明肯定能改 2.en ...

  4. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  5. webpack2版本四个核心概念

    webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler) 四个核心概念: --------------------------------------- ...

  6. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  7. （转）Maven学习总结(四)——Maven核心概念

    孤傲苍狼只为成功找方法,不为失败找借口! Maven学习总结(四)——Maven核心概念 一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Mav ...

  8. BitAdminCore框架应用篇：（四）核心套件querySuite按钮功能

    索引 NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/coo ...

  9. Hibernate的核心配置

    Hibernate的设计思路 Hibernate是一种全自动化管理持久化对象的ORM框架,既提供了完全面向对象的封装完整的对象持久化接口(屏蔽db层的差异化,提升代码可移植性),也提供了操作HQL和S ...

随机推荐

  1. java抽象类注意问题

    当知道一个类的子类将不同的实现某个方法时,把该类声明为抽象类很有用,可以共用相同的父类方法,不必再定义. 抽象类和抽象方法的关系:含有抽象方法的类一定是抽象类,抽象类里不一定含有抽象方法. 抽象类存在 ...

  2. 洛谷 P1025 数的划分

    题目描述 将整数n分成k份,且每份不能为空,任意两个方案不相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5; 1,5,1; 5,1,1; 问有多少种不同的分法. 输 ...

  3. Java中常见数据结构List之LinkedList

    二,LinkedList 1, linkedList底层数据结构 linkedList底层是一个双向链表 2,LinkedList和ArrayList的对比 1.顺序插入速度ArrayList会比较快 ...

  4. Intellij +Maven 报错: Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.

    在intellij使用 Maven Project 测试时,运行test时看到log里的报错信息: -Dmaven.multiModuleProjectDirectory system propert ...

  5. Clion下jni配置

    Clion非常适合写C++程序 首先把C:\Program Files\Java\jdk1.7.0_79\include和C:\Program Files\Java\jdk1.7.0_79\inclu ...

  6. 用IDEA生成javadoc文档

    用IDEA生成javadoc文档 打开相应的选项面板 设置 -encoding是java代码编码,-charset是对生成文档所用的编码.-windowtitle就是对应html的<title& ...

  7. 基于jQuery/zepto的单页应用(SPA)搭建方案

    这里介绍一个基于jquery或zepto的单页面应用方案,遵循尽可能简单的原则,使大家一目了然,只需配置一个路由,之后完全按照jq日常写法即可完成.可做学习使用,也可修改后用于一些业务逻辑简单的spa ...

  8. ASP.NET MVC编程——错误处理与日记

    ASP.NET MVC的错误处理应考虑到这几个方面:模型绑定期间发生的错误,未能路由到指定操作,针对控制器的错误处理.使用配置文件可以帮助我们处理异常,但是不够灵活和全面:使用HandleErrorA ...

  9. 浅谈XAML控件

    在win10系统内简单使用了XAML控件,由于本人英语水平有限,在自己的摸索使用.分析代码以及翻译软件.搜索引擎.室友情的帮助下了解了控件的相关功能,下面简要对XAML控件提出几点建议: 1.Cale ...

  10. Algorithm --> 树中求顶点A和B共同祖先

    树中求顶点A和B共同祖先 题目: 给定一颗树,以及两个顶点A和B,求最近的共同祖先,和包含的子顶点个数? 比如:给定如下图的树,以及顶点13和8,则共同祖先为3,以3为root的子顶点共有8个