最早的时候，所有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. dataset中shuffle()、repeat()、batch()用法
			
    import numpy as npimport tensorflow as tfnp.random.seed(0)x = np.random.sample((11,2))# make a datas ...
    
			
    2. 
						
  2. Spring Boot 入门（十二）：报表导出，对比poi、jxl和esayExcel的效率
			
    本片博客是紧接着Spring Boot 入门(十一):集成 WebSocket, 实时显示系统日志写的 关于poi.jxl和esayExcel的介绍自行百度. jxl最多支持03版excel,所以单个 ...
    
			
    3. 
						
  3. scrapy持久化到Excel表格
			
    前提条件: 防止乱码产生 ITEM_PIPELINES = { 'xpc.pipelines.ExcelPipeline': 300, } 方法一 1.安装openpyxl conda install ...
    
			
    4. 
						
  4. 用自定义变量作为动作方法参数   URL路由 精通ASP-NET-MVC-5-弗瑞曼
			
    
			
    5. 
						
  5. hihoCoder 1387  A Research on "The Hundred Family Surnames"
			
    搬家一个月,庆祝一下 啪啪啪啪啪啪啪啪啪啪❀❀❀❀ 题目传送门 分析: 这什么奇奇怪怪的OJ,以前从来不知道的2333 以前只知道合并两个连通块时,其中一边直径端点为A,B,另一边为C,D D=max ...
    
			
    6. 
						
  6. Typora常用快捷键
			
    目录 无序列表:输入-之后输入空格 有序列表:输入数字+"."之后输入空格 任务列表:-[空格]空格 文字 标题:ctrl+数字 表格:ctrl+t 生成目录:按回车 选中一整行: ...
    
			
    7. 
						
  7. jsp路径
			
    访问静态资源的时候${pageContext.request.Context}没有作用,在浏览器F12调试的时候发现,路径并没有被解释为项目的根路径,而是没有解释出来,还是${pageContext. ...
    
			
    8. 
						
  8. C++快读模板
			
    C++的快速读入模板 inline int read() { ; char ch = getchar(); ') { if (ch == '-') flag = true; ch = getchar( ...
    
			
    9. 
						
  9. Boyer-Moore 算法 Leetcode169
			
    Boyer-Moore 算法 Leetcode169 一.题目 169. 多数元素 给定一个大小为 n 的数组,找到其中的多数元素.多数元素是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假 ...
    
			
    10. 
						
  10. linux系统CentOS7中find命令使用
			
    一.作用 查找文件或目录 二.参数(常用) -atime 查找在指定时间曾被存取过的目录或文件,单位以24小时计算.(访问时间,执行文件等) -ctime 查找指定时间曾被更改的目录或文件,单位以24 ...
    
			
    11.