Webpack前端打包工具

时间：2021-09-17 18:38:16

一、安装

  安装Webpack之前需要安装nodejs，然后用npm安装:

$ npm install webpack -g

 &nsbp;运行以上命令就将Webpack安装到了全局环境中。
  但是通常我们会将Webpack只安装到项目的依赖中:

$ cd /www/webpack_demo1      // 进入项目目录，确保该目录下存在有package.json文件,该文件之后会讲到
$ npm install webpack --save-dev // 安装webpack依赖

二、使用

  首先创建一个index.html和entry.js文件：

// index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script> // 注意这里是bundle.js不是entry.js
</body>
</html>
// entry.js
document.write('It works.')

  然后编译 entry.js 并打包到 bundle.js：

$ webpack entry.js bundle.js

  然后用浏览器打开会看到It works
  接下来添加一个模块module.js，并修改入口entry.js:

// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块

  然后重新打包 webpack entry.js bundle.js 刷新页面可以看到变化 It works.It works from module.js.
  Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

三、Loader

  Webpack本身只能处理js模块，如果要加载css\img...等静态资源就需要使用Loader转换
  Loader可以理解为模块和资源的加载器，它本身是一个函数，接受源文件为参数然后转换并返回。这样我们就可以通过require加载任何类型的模块或文件。   Loader的特性:

  • 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
  • Loader 可以同步或异步执行。
  • Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
  • Loader 可以接受参数，以此来传递配置项给 loader。
  • Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
  • Loader 可以通过 npm 发布和安装。
  • 除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。
  • Loader 可以访问配置。
  • 插件可以让 loader 拥有更多特性。
  • Loader 可以分发出附加的任意文件。

  惯例loader一般是xxx-loader格式，eg: css-loader。在引用loader的时候可以使用简写: json-loader可以写json。
  Loader可以在require()引用模块的时候添加，也可以在webpac全局配置中进行绑定，还可以通过命令行的方式使用。
  下面来说明下loader怎么用   我们在页面中引入一个style.css文件，首页将style.css看成一个模块，使用css-loader读取它，再用style-loader把它插入到页面

/* style.css */
body { background: blue; }

  修改entry.js

require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))

  安装loader：

$ npm install css-loader style-loader // 我在这里安装的时候貌似报了个错，后边加-g指定全局安装就好了

  重新编译打包可以看到页面背景颜色发生了变化
  如果每次require CSS文件的时候都要写loader前缀，很麻烦，我们可以根据模块类型(扩展名)来自动绑定需求的loader。
  将entry.js中的require("!style!css!./style.css") 修改为require("./style.css"),然后执行:

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

// 有些环境下可能需要使用双引号
$ webpack entry.js bundle.js --module-bing "css=style-loader!css-loader"

  这两种方式效果是一样的。

四、配置文件

  Webpack处理在命令行中指定参数还可以通过制定配置文件来执行。默认情况下会搜索当前目录的webpack.config.js文件，这个文件是一个node.js模块，返回一个json格式的配置信息对象，或通过 --config 选项来指定配置文件。

  在项目中创建package.json（package.json是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件）来添加webpack需要的依赖:

{
  "name": "webpack-example",
 "version": "1.0.0",
 "description": "A simple webpack example.",
 "main": "bundle.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [
"webpack"
 ],
 "author": "orlion",
 "license": "MIT",
 "devDependencies": {
 "css-loader": "^0.21.0",
 "style-loader": "^0.13.0",
 "webpack": "^1.12.2"
 }
}

  然后运行:

npm install

  然后创建一个配置文件webpack.config.js：

var webpack = require('webpack')

module.exports = {
 entry: './entry.js',
 output: {
 path: __dirname,
 filename: 'bundle.js'
 },
module: {
 loaders: [
 {test: /\.css$/, loader: 'style-loader!css-loader'}
 ]
 }
}

  同时简化entry.js与style.css加载方式:

require('./style.css')

五、插件

  插件可以完成loader不能完成的功能
  插件的使用一般是在webpack的配置信息plugins选项中指定。
  Webpack本身内置了一些常用的插件，下面我们利用BannerPlugin内置插件来演示一下。这个插件的作用是给输出的文件头部添加注释信息
  修改webpack.config.js，添加plugins:

var webpack = require('webpack')

module.exports = {
 entry: './entry.js',
 output: {
 path: __dirname,
 filename: 'bundle.js'
 },
module: {
 loaders: [
 {test: /\.css$/, loader: 'style-loader!css-loader'}
 ]
 },
 plugins: [
new webpack.BannerPlugin('This file is created by zhaoda')
 ]
}

  然后运行webpack，打开bundle.js。可以看到文件头部出现了我们指定的注释信息：

/*! This file is created by zhaoda */
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
...
标签：

相关文章