一、安装

  安装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 = {};
...

相关文章

网站地图xml地图