最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。

　　<script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>

这段代码依次加载多个js文件。

这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

WebPack可以看做是模块打包机或项目自动化构建工具：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

js本身没有模块化的功能，后来出现commonjs支持模块化语法，webpack也支持commonjs的模块化语法，让我们可以使用模块化的方式编写js（比如require引入其他js文件），我们写的模块代码，经过webpack构建和包装之后，能够在浏览器以模块化的方式运行。

webpack不仅支持commonjs，也支持es6,amd等其他模块化语法

PS: webpack的模块不仅指js，包括css、图片等资源都可以以模块看待

自动分析项目中的各种文件，进行相应操作，比如压缩图片、js文件；预编译less，Scss等文件

方便构建各种运行环境，比如测试环境、生产环境等

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

 
 

　

1.安装nodejs和npm：

NPM是随同NodeJS一起安装的包管理工具（安装了nodejs，会自带npm），能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

　　1.从NPM服务器下载第三方包到本地使用。

　　2.从NPM服务器下载并安装第三方命令行程序到本地使用。

　　3.将自己编写的包或命令行程序上传到NPM服务器供别人使用。

　　由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装

使用以下全局安装最新版npm：

npm install npm -g

或安装淘宝镜像npm（cnpm）

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后可以用cnpm命令替代npm命令

更新nodejs：

第一步，先查看本机node.js版本：
        $ node -v

第二步，清除node.js的cache：
       $ sudo npm cache clean -f

第三步，安装 n 工具，这个工具是专门用来管理node.js版本的，别怀疑这个工具的名字，是他是他就是他，他的名字就是 "n"
        $ sudo npm install -g n

第四步，安装最新版本的node.js
        $ sudo n stable

第五步，再次查看本机的node.js版本：
        $ node -v

 

2.安装、创建并初始化项目：

首先，创建一个项目文件夹：

mkdir app

安装webpack

全局安装webpack

npm i webpack -g


对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。

　初始化项目：

  npm init -y

执行完后，将生产package.json

　package.json定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）

也可以执行npm init，加一个-y会默认生成package.json，比如版本号，名称，包名这些会默认生成，如果没有-y，会提示你设置这些参数

使用-y默认生成后，也可以再执行npm init，手动设置各种配置参数，将会覆盖之前设置的值

然后本地安装webpack:

npm install --save-dev webpack   //安装webpack

npm install --save-dev webpack-cli //4.x需要安装cli

npm list webpack---查看当前目录本地安装的webpack版本

3.简单项目样例：

sublime打开项目文件夹

按以下结构新建项目文件：

├── dist         ---打包后的目标文件存放目录

├── node_modules ---webpack本地安装的目录

├── package.json ---项目配置文件，是一个标准的npm说明文件
├── webpack.config.js ---webpack配置文件
└── src 
     └── app.js ---源码存放目录
webpack.config.js需要自己新建，内容类似于：　　

module.exports = {

	entry:'./src/app.js',

	output:{

		filename:'app.bundle.js'

	}

}

entry是源文件，需要指定目录，output是打包后的文件，打包后的文件会自动放到dist里，不需要指定目录

进入项目，执行命令：

webpack

完成打包

webpack --watch:源文件改变后不需要重新打包，目标文件会自动改变

webpack -d:测试版，不会压缩js,加入调试信息可以方便在浏览器调试(调试的时候可以自动关联到源码，可以在源码里断点调试) 默认情况下不带参数会生成生产版，生成版会压缩

我们可以把webpack命令集成到package.json里面，这样就可以用npm命令来执行打包（一般推荐这么做）

在package.json的scripts模块里加入webpack命令的配置：

"scripts": {

    "dev": "webpack -d --watch",

    "prod": "webpack"

  },

执行npm run dev---打包生产调试版

执行npm run prod---打包生产版

4.项目样例2：

在项目中创建两个文件夹,app文件夹和public文件夹（跟之前的src和dist一样），app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

  • index.html --放在public文件夹中;
  • Greeter.js-- 放在app文件夹中;
  • main.js-- 放在app文件夹中;

此时项目结构如下图所示

 
项目结构

我们在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，之后我们还会详细讲述）。

<!-- index.html -->

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Webpack Sample Project</title>

  </head>

  <body>

    <div id='root'>

    </div>

    <script src="bundle.js"></script>

  </body>

</html>

我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块：

// Greeter.js

module.exports = function() {

  var greet = document.createElement('div');

  greet.textContent = "Hi there and greetings!";

  return greet;

};

main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。

//main.js

const greeter = require('./Greeter.js');

document.querySelector("#root").appendChild(greeter());

webpack.config.js：

module.exports = {

  entry:  __dirname + "/app/main.js",

  output: {

    path: __dirname + "/public",//打包后的文件存放的地方

    filename: "bundle.js"//打包后输出文件的文件名

  }

}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

 
package.json:
{

  "name": "app6",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "dependencies": {

    "webpack-cli": "^3.2.3",

    "webpack": "^4.29.5"

  },

  "devDependencies": {},

  "scripts": {

    "start": "webpack",

    "debug":"webpack -d"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

start命令可以之前用npm start（也可以npm run start），其他命令必须是npm run xxx，比如npm run debug

5.html-webpack-plugin插件

前面的例子中， index.html 文件太死了，连 js 文件都写死了，有时候引用的 js 文件是动态变化的呢？

打个比方，类似下面这种例子：

<script src="app.bundle1.js"></script>

<script src="app.bundle2.js"></script>

<script src="app.bundle3.js"></script>

而且还不确定有多少个。

还有一种情况，有时候为了更好的 cache 处理，文件名还带着 hash，例如下面这样：

main.9046fe2bf8166cbe16d7.js

这个 hash 是文件的 md5 值，随着文件的内容而变化，你总不能每变化一次，就改一下 index.html 文件吧？

效率太低！

下面我们要使用一个 webpack 的插件 html-webpack-plugin  来更好的处理这个问题。

webpack 吸引人的地方就是因为它有太多的插件，有时候一些需求，一个插件就搞定。

安装html-webpack-plugin插件：

npm install html-webpack-plugin --save-dev

安装成功后，package.json 这个文件会多出一行 "html-webpack-plugin": "^x.xx.x",，如下所示：

{

  "name": "hello-wepback",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "dev": "webpack -d --watch",

    "prod": "webpack -p"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "html-webpack-plugin": "^2.30.1",

    "webpack": "^3.8.1"

  }

}

也可以反向操作，先配置好devDependencies，然后在工程目录执行：

npm install
这样可以批量安装devDependencies里所有配置的依赖

现在我们把第一个例子中生成的 index.html 先删除掉，我们要用 html-webpack-plugin 这个插件来自动生成它。

把 webpack.config.js 文件改一下，如下所示：





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

module.exports = {

  entry: './src/app.js',

  output: {

    path: __dirname + '/dist',

    filename: 'app.bundle.js'

  },

  plugins: [new HtmlWebpackPlugin()]

};




然后运行


npm run start


就会自动生成index.html




<html>

  <head>

    <meta charset="UTF-8">

    <title>Webpack App</title>

  </head>

  <body>

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

</html>




跟手动写的一样


连标题 <title>Webpack App</title> 都自动生成了，如果这是固定的话，就不太灵活，但是 html-webpack-plugin 有选项来处理这个问题。


要改变 title 很简单，上文提到 HtmlWebpackPlugin 这个方法可以传入很多参数的，下面这样就可以解决这个问题。


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

module.exports = {

  entry: './src/app.js',

  output: {

    path: __dirname + '/dist',

    filename: 'app.bundle.js'

  },

  plugins: [new HtmlWebpackPlugin({

    title: "hello world"

  })]

};


只是改变了一点点东西，其实也没多大用处，有时候我们要让 index.html 根据我们的意愿来生成。就是说它的内容是我们自己定的。


这个就不得不提到 html-webpack-plugin 的 template 功能。


把 webpack.config.js 更改如下：


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

module.exports = {

  entry: './src/app.js',

  output: {

    path: __dirname + '/dist',

    filename: 'app.bundle.js'

  },

  plugins: [new HtmlWebpackPlugin({

    template: './src/index.html',

  })]

};


接着新建 src/index.html 文件，内容如下：


<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Hello World</title>

</head>

<body>

</body>

</html>


我们再来看看新生成的 dist/index.html 文件，内容如下：


<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Hello World</title>

</head>

<body>

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

</html>


下面我再来介绍几个参数，以及它的结果。


filename: 'index.html' 默认情况下生成的 html 文件叫 index.html，但有时候你不想叫这个名字，可以改。


  minify: {

      collapseWhitespace: true,

    },


这个可以把生成的 index.html 文件的内容的没用空格去掉，减少空间。(默认是true，可以改成false，这样就会按正常的格式生成html)


hash: true 为了更好的 cache，可以在文件名后加个 hash。


效果如下：




<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Webpack App</title>

  <meta name="viewport" content="width=device-width,initial-scale=1"></head>

  <body>

  <script src="bundle.js?4abc2d79d055a2c3cf3f"></script></body>

</html>




最终的配置文件可能如下：


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

module.exports = {

  entry: './src/app.js',

  output: {

    path: __dirname + '/dist',

    filename: 'app.bundle.js'

  },

  plugins: [new HtmlWebpackPlugin({

    template: './src/index.html',

    filename: 'index.html',

    minify: {

      collapseWhitespace: true,

    },

    hash: true,

  })]

};





												


											
webpack--介绍、安装及入门的更多相关文章
	

    
						
  1. webpack 介绍 & 安装 & 常用命令
		
    webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...
    
		
    2. 
						
  2. webpack介绍 安装  常用命令
		
    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...
    
		
    3. 
						
  3. webpack学习（一）：webpack 介绍&安装&常用命令
		
    一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...
    
		
    4. 
						
  4. [Python爬虫] scrapy爬虫系列 <一>.安装及入门介绍
		
    前面介绍了很多Selenium基于自动测试的Python爬虫程序,主要利用它的xpath语句,通过分析网页DOM树结构进行爬取内容,同时可以结合Phantomjs模拟浏览器进行鼠标或键盘操作.但是,更 ...
    
		
    5. 
						
  5. windows下nodejs express安装及入门网站,视频资料，开源项目介绍
		
    windows下nodejs express安装及入门网站,视频资料,开源项目介绍,pm2,supervisor,npm,Pomelo,Grunt安装使用注意事项等总结 第一步:下载安装文件下载地址: ...
    
		
    6. 
						
  6. PyCharm 介绍、安装、入门使用
		
    一.Pycharm介绍 前面几年的时间,我一直用的eclipse,后面开始听同事说用IntelliJ IDEA了,而且说是目前业界最好用的java开发工具,IDE(集成开发环境),没有之一.PyCha ...
    
		
    7. 
						
  7. 前端开发自动化工作流工具，JavaScript自动化构建工具grunt、gulp、webpack介绍
		
    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
    
		
    8. 
						
  8. JavaScript自动化构建工具grunt、gulp、webpack介绍
		
    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
    
		
    9. 
						
  9. Apache Hadoop2.x 边安装边入门
		
    完整PDF版本:<Apache Hadoop2.x边安装边入门> 目录 第一部分:Linux环境安装 第一步.配置Vmware NAT网络 一. Vmware网络模式介绍 二. NAT模式 ...
    
		
    10. 
						
  10. webpack的安装和使用
		
    Webpack是什么 首先可以看下 官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 详细解析Redis中的布隆过滤器及其应用
			
    欢迎关注微信公众号:万猫学社,每周一分享Java技术干货. 什么是布隆过滤器 布隆过滤器(Bloom Filter)是由Howard Bloom在1970年提出的一种比较巧妙的概率型数据结构,它可以告 ...
    
			
    2. 
						
  2. Linux 断网安装MySQL5.x操作步骤
			
    1.下载MySQL安装包 由于官网下载比较慢,暂时我这边采用的方法是通过网易云的centos镜像下载的地址是 http://mirrors.163.com/mysql/Downloads/MySQL- ...
    
			
    3. 
						
  3. 【VBA】EXCEL通过VBA生成SQL，自动生成创建表结构SQL
			
    原文:https://blog.csdn.net/zutsoft/article/details/45441343 编程往往与数据库密不可分,一个项目往往有很多的表,很多时候通过excel来维护表结构 ...
    
			
    4. 
						
  4. HanLP《自然语言处理入门》笔记--3.二元语法与中文分词
			
    笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 3. 二元语法与中文分词 上一章中我们实现了块儿不准的词典分词,词典分词无法消歧. ...
    
			
    5. 
						
  5. IO博客专栏
			
    1. IO概览 2. 字符流与字节流的区别
    
			
    6. 
						
  6. Java 架构知识点整理
			
    架构学习 1. Java 核心技术 1.1. 基础知识 1.1.1. 进制转换 1.1.2. 异常处理 1.1.3. List 分批代码 1.1.4. 字符串分割 1.1.5. 编码风格 1.2. 并 ...
    
			
    7. 
						
  7. discuz如何修改主题列表页增加最后发表用户调用
			
    首页有点问题,我觉得摘要实在太长了,我调整了一下 <!--{if is_array($group['lastpost'])}--> <a href="forum.php?m ...
    
			
    8. 
						
  8. Spring   IoC 容器和 bean 对象
			
    程序的耦合性: 耦合性(Coupling),又叫耦合度,是对模块间关联程度的度量.耦合的强弱取决于模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少.模块间的耦合度是指模块之间的依赖关系,包 ...
    
			
    9. 
						
  9. 自学Java第四章——《数组》
			
    4.1 数组的相关概念和名词(了解) 1.数组(array): 一组具有相同数据类型的数据的按照一定顺序排列的集合. 把有限的几个相同类型的变量使用一个名称来进行统一管理. 2.数组名: (1)这个数 ...
    
			
    10. 
						
  10. FFMPEG学习----遍历所支持的封装格式
			
    #include <stdio.h> extern "C" { #include "libavformat/avformat.h" }; int m ...
    
			
    11.