webpack 是什么
Posted 影乌De家
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack 是什么相关的知识，希望对你有一定的参考价值。
转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack 是什么
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
一、webpack的初体验
1.1、初始化环境
> npm init
1.2、安装 webpack
#本地目录 安装 webpack 及配套的 webpack-cli
npm i webpack webpack-cli -D
#全局 安装 webpack 及配套的 webpack-cli
npm i webpack webpack-cli -g
#本地目录 安装 webpack 及指定版本3.*的 webpack-cli
npm i webpack webpack-cli@3 -D
1.3、运行指令
1.3.1、创建入口js文件
// index. js: webpack入口起点文件
// 路径： ./src/index.js
function add(x, y)
return x + y;
console.log(add(1, 2));
1.3.2、开发环境运行
# 开发环境
# webpack会以./src/index.js为入口文件开始打包,打包后输出到./build/built.js整体打包环境,是开发环境
> webpack ./src/index.js -o./build/built.js--mode-development
1.3.3、生产环境运行
# 生产环境
# webpack会以./src/index.js为入口文件开始打包,打包后输出到./build/built.js整体打包环境,是生产环境
> webpack ./src/index.js -o ./build/built.js--mode-production
-
结论:
1、 webpack能处理js/json资源,不能处理css/img等其他资源
2、生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
3、生产环境比开发环境多一个压缩js代码
二、使用 webpack.config.js 配置执行打包
创建如下初始目录和文件
.
├── src
│ ├── index.css
│ ├── index.html
│ ├── index.js
│ ├── logo1.png
│ ├── logo2.png
│ └── logo3.png
└── webpack.config.js
2.1、index各文件内容
<!-- 文件路径 ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack 学习</title>
</head>
<body>
<h1 id="title">hello webpack</h1>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<img src="./logo2.png" />
</body>
</html>
/*
路径： ./src/index.css
*/
html,
body
margin: 0;
padding: 0;
height: 100%;
background-color: Dpink;
#title
color: black;
#box1
width: 100px;
height: 100px;
background-image: url(\'./logo1.png\');
background-repeat: no-repeat;
background-size: 100% 100%;
#box2
width: 200px;
height: 200px;
background-image: url(\'./logo2.png\');
background-repeat: no-repeat;
background-size: 100% 100%;
#box3
width: 300px;
height: 300px;
background-image: url(\'./logo3.png\');
background-repeat: no-repeat;
background-size: 100% 100%;
/*
index.js: webpack入口起点文件
路径： ./src/index.js
*/
// 引入样式资源
import \'./index.css\';
function add(x, y)
return x + y;
console.log(add(1, 2));
2.2、webpack.config.js 配置文件内容
/*
webpack.config.js webpack的配置文件
作用:指示webpack干哪些活(当你运行webpack指令时,会加载里面的配置)所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.
loader: 1.下载 2.使用(配置loader)
plugins: 1.下载2. 引入 3.使用
路径： ./webpack.config.js
*/
// resolve用来拼接绝对路径的方法
const resolve = require(\'path\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
module.exports =
// webpack配置
// 入口起点文件
entry: \'./src/index.js\',
// 输出
output:
//输出文件名
filename: \'built.js\',
//输出路径
//__dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, \'build\')
,
// loader的配置
module:
rules: [
//打包 css 文件的详细loader配置
//匹配哪些文件
test: /\\.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
\'style-loader\',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
\'css-loader\'
]
,
//问题：默认处理不了 html 中的 img 图片
//处理图片资源
test: /\\.(jpg|png|gif)$/,
//使用一个loader
//下载url-loader file-loader
loader: \'url-loader\',
options:
//图片大小小于8kb,就会被base64处理
//优点:减少请求数量(减轻服务器压力)
//缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
//问题:因为url-loader默认使用es6模块化解析, 而html-loader默认引入图片是commonjs
//解析时会出问题: [object Module]
//解决:关闭url-loader的es6模块化,使用commonjs解析
esModule: false,
// 给图片进行重命名
//[hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name: \'[hash:10].[ext]\'
,
test: /\\.html$/,
//处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
loader: \'html-loader\',
options:
//默认情况下,生成使用ES块语法的Js模块
//问题:生成的图片显示错误
//解决: esModule改为false
esModule: false,
,
]
,
// plugins的配置
plugins: [
//详细的plugins配置
//html-webpack-plugin
//功能:默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
//需求:需要有结构的HTML文件
new HtmlWebpackPlugin(
//复制../src/index.html\'文件,并自动引入打包输出的所有资源(JS/CS5)
template: \'./src/index.html\'
)
],
//模式 development 开发环境，production 生产环境
mode: \'development\',
// mode: \'production\'
2.3、安装 loader 和插件
在项目文件夹下打开终端运行以下命令
# 打包css 文件时用到css-loader和style-loader
> # 安装 style-loader和css-loader
> npm i css-loader style-loader -D
# 打包图片文件用到url-loader 和 file-loader
# 安装 url-loader 和 file-loader
> npm i url-loader file-loader -D
# html 中引用了图片需要用到 html-loader
> # 在安装 url-loader 和 file-loader 的基础上安装 html-loader
> npm i html-loader -D
#打包 html 文件用到html-webpack-plugin 插件
# 安装 html-webpack-plugin 插件
> npm i html-webpack-plugin -D
2.4、执行打包
在项目文件夹下打开终端运行以下命令
> webpack
2.5、打包完后目录结构
.
├── build
│ ├── 2bd7a1d86f.png
│ ├── be0c215ecf.png
│ ├── built.js
│ └── index.html
├── src
│ ├── index.css
│ ├── index.html
│ ├── index.js
│ ├── logo1.png
│ ├── logo2.png
│ └── logo3.png
├── package-lock.json
├── package.json
└── webpack.config.js
其中 build 文件内的内容就是 webpack打包出来的产物，css 文件和小于8 kb的图片都被打包进入了 built.js 文件
什么是WebPack，为什么要使用它？
说明：
这里是webpack1.0+,如果你用的是2.0+请移步这里
webpack案例：1 豆瓣热映电影
配置好的webpack2脚手架：戳这里
正文从下面开始.................
1、什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
2、为什要使用WebPack
今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
a:模块化，让我们可以把复杂的程序细化为小的文件;
b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
c:scss，less等CSS预处理器
.........
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
3、WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
优点：模块化
在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
1、CSS
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
需要分别安装：npm install --save-dev style-loader css-loader
2、CSS modules
在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，且基于优化工具，依赖管理和加载管理可以自动完成。
不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧是巨大且充满了全局类名，这使得维护和修改都非常困难和复杂。
最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下
这样相同的类名也不会互相污染
3、CSS预编译
Sass 和 Less之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，
你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders
a:less-loader
b:sass-loader
c:stylus-loader
还有一个CSS处理平台-PostCSS，可以让你用CSS事先更多功能，比如如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。
首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer
并在webpack配置文件中进行设置，只需要新建一个postcss关键字，并在里面申明依赖的插件，如下，现在你写的css会自动根据Can i use里的数据添加不同前缀了。
二、webpack-pulgins
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。
1、如何使用插件？
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组），我们添加了一个实现版权声明的插件。如HtmlWebpackPugin插件，
该插件的作用是依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。
//安装
npm install --save-dev html-webpack-pugin
转载
以上是关于webpack 是什么的主要内容，如果未能解决你的问题，请参考以下文章