一、 什么是WebPack

WebPack可以看做是模块加载、打包工具。

它所做的事情是

1、分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等）。

2、将其打包为合适的格式以供浏览器使用。

工作方式



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

任何静态资源都可以视作模块，然后模块之间也可以相互依赖，通过webpack对模块进行处理后，可以打包成我们想要的静态资源。

二、安装

在控制台使用npm安装[需要事先装好node和nmp]

//全局安装

npm install -g webpack

三、建立项目

1、在上述练习文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件

  npm init -y

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

2、在当前目录下安装 webpack

// 本地安装Webpack

npm install --save-dev webpack

3、回到之前的空文件夹，并在里面创建两个文件夹,src文件夹和build文件夹，src文件夹用来存放我们将写的JavaScript模块，build文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。

在这里还需要创建三个文件，index.html 文件放在build文件夹中，一个js文件example.js此时项目结构如下图所示

node_modules 文件夹

src 文件夹

    example.js

bulid 文件夹

    index.html

package.json

index.html 文件，示例如下：

  <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <title>webpack example</title>

  </head>

  <body>

  <script src="./bundle.js"></script> <!-- bundle.js为之后打包后输出的文件 -->

  </body>

  </html>

example.js文件，示例如下：

//安装babel后客使用ES6的模块定义和渲染 并返回一个React组件

import React, { Component } from 'react'  //react导入

import ReactDOM from 'react-dom'

import json from './test.json'

import './style.css'               //css导入

import img from './producticon.png'//图片导入

import img2 from './images/a.gif'

class App extends Component {

render() {

  return (

    <div>

      <p className="title">{json.text}</p>

      <p>Example11111111111</p>

    </div>

  )

}

}

ReactDOM.render(<App/>, document.getElementById('root'));

四、WebPack 配置

1、基础配置

单页面应用里，项目通常会有一个入口（entry）文件，假设是 example.js，我们通过配置 webpack 来指明它的位置。

首先，在项目根目录新建一个 webpack.config.js，这是 webpack 默认的配置文件名称，添加以下内容：

module.exports = {

    entry: '../src/example.js'  // 演示单入口文件

    output: {

        path: __dirname,      // 打包后输出文件的保存路径

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

    }

}

//"__dirname"是Node.js中的一个全局变量，它指向当前执行脚本所在的目录。

由于配置了webpack的webpack.config.js配置文件，现在我们可以使用webpack命令来打包文件

webpack

我们的根目录下会多出一个bundle.js文件。

2、本地服务器配置

安装webpack-dev-server

npm install --save-dev webpack-dev-server

添加本地服务器配置

module.exports = {

    entry: '../src/example.js'

    output: {

        path: __dirname,

        filename: 'bundle.js'

    }

}

//本地服务器配置

devServer: {

    contentBase: "./build",//本地服务器所加载的页面所在的目录

    port: 8888,

    colors: true,//终端中输出结果为彩色

    historyApiFallback: true,//不跳转

    inline: true//实时刷新

  }

webpack-dev-server 提供了两种模式用于自动刷新页面：

iframe 模式

我们不访问 http://localhost:8080，而是访问 http://localhost:8080/webpack-dev-server/index.html

inline 模式

在命令行中指定该模式，webpack-dev-server --inline。这样 http://localhost:8080/index.html 页面就会在 js 文件变化后自动刷新了。

以上说的两个页面自动刷新的模式都是指刷新整个页面，相当于点击了浏览器的刷新按钮。

webpack-dev-server 还提供了一种 --hot 模式，属于较高阶的应用。

3、快捷命令

npm可以引导任务执行，对其进行配置后可以使用简单的npm build命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可，设置方法如下。

{

 "name": "lesson-3",

 "version": "1.0.0",

 "description": "",

 "main": "src/example.js",

 "scripts": {

   "test": "echo \"Error: no test specified\" && exit 1",

   "compile": "babel src/example.js -o example.compiled.js",

   "run": "babel-node src/example.js",

   "build": "webpack",//在这里~~

   "build-watch": "webpack --w --color",

   "start": "webpack-dev-server"

 },

 "author": "",

 "license": "ISC",

 "devDependencies": {

   "babel-cli": "^6.18.0",

   "babel-loader": "^6.2.8",

   "babel-polyfill": "^6.16.0",

   "babel-preset-latest": "^6.16.0",

   "babel-preset-react": "^6.16.0",

   "babel-preset-stage-0": "^6.16.0",

   "css-loader": "^0.26.0",

   "extract-text-webpack-plugin": "^1.0.1",

   "file-loader": "^0.9.0",

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

   "json-loader": "^0.5.4",

   "style-loader": "^0.13.1",

   "url-loader": "^0.5.7",

   "webpack": "^1.13.3",

   "webpack-dev-server": "^1.16.2"

 },

 "dependencies": {

   "react": "^15.4.0",

   "react-dom": "^15.4.0"

 }

}

注：package.json中的脚本部分已经默认在命令前添加了node_modules/.bin路径，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。

npm的start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build。

五、Webpack的强大功能——生成Source Maps（使调试更容易）

通过简单的配置后，Webpack在打包时可以为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：

devtool选项 配置结果

1、source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；

2、cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；

3、eval-source-map 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；

4、cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

module.exports = {

    entry: '../src/example.js'

    output: {

        path: __dirname,

        filename: 'bundle.js'

    },

    devtool: 'eval-source-map'//配置生成Source Maps，选择合适的选项

}

五、Loaders

通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。

安装jsonloader

//json loader

npm install json-loader --save-dev

//css loader

npm install style-loader css-loader --save-dev


module.exports = {

  entry: "./src/example.js",

  output: {

    path: "./build",

    filename: "bundle.js"

  },

  devtool: "eval-source-map",

  module: {//在配置文件里添加JSON loader

    loaders: [

      {

        test: /\.json$/,

        loader: "json"

      },

       {

        test: /\.js$/,

        exclude: /node_modules/,

        loader: 'babel',//babel

        query: {

          presets: ['es2015','react']

        }

      },

      {//添加css loader

        test: /\.css$/,

        //loader: 'style!css'//添加对样式表的处理，感叹号的作用在于使同一文件能够使用不同类型的loader

        loader: ExtractTextPlugin.extract("style-loader", "css-loader")

      },

      {

        test: /\.(jpg|png|gif)$/,

        loader: "url?limit=8192" //只有不大于8kb的图片才会打包处理成Base64的图片

      },

    ]

  },

  devServer: {

    contentBase: "./build",//本地服务器所加载的页面所在的目录

    port: 8888,

    colors: true,//终端中输出结果为彩色

    historyApiFallback: true,//不跳转

    inline: true//实时刷新

  }

};

六、插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。

Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

//安装jquery

npm install jquery --save


//example.js中引用

import $ from 'jquery'

还可以安装其他的插件，并配置在webpack.config.js中，例如：

//webpack.config.js增加

plugins: [

    //new webpack.optimize.CommonsChunkPlugin('common.js'),

    new ExtractTextPlugin("[name].css", {allChunks: true}) // allChunks=true 所有独立样式打包成一个css文件

  ],

3-WebPack的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. Java中的数组操作进阶

    package com.mi.array; import java.util.Arrays; /** * System.arraycopy(i, 0, j, 0, i.length);这种复制会覆盖目 ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON color_fuses2

    zw版[转发·台湾nvp系列Delphi例程]HALCON color_fuses2 procedure TForm1.Button1Click(Sender: TObject);var w, h : ...

  3. 安装交叉编译器arm-linux-gcc

    需要交叉编译环境故安装交叉编译环境    1.在宿主机的/usr/local/arm目录存放交叉编译器        mkdir /usr/local/arm    2.解压交叉编译器包至/usr/l ...

  4. linux系统中grub配置文件

    安装了Windows和Linux时肯定要通过GRUB进行引导,GRUB引导器的主配置文件路径/boot/grub/grub.conf(也可能是/boot/grub2/grub.conf),以#号开头的 ...

  5. C语言初学者代码中的常见错误与瑕疵(9)

    题目 字母的个数 现在给你一个由小写字母组成字符串,要你找出字符串中出现次数最多的字母,如果出现次数最多字母有多个那么输出最小的那个. 输入:第一行输入一个正整数T(0<T<25) 随后T ...

  6. 鸟哥的linux私房菜学习记录之例行性工作

  7. 某硕笔试题mysql数据库部分（较为全面）

    Student(S#,Sname,Sage,Ssex) 学生表  Course(C#,Cname,T#) 课程表  SC(S#,C#,score) 成绩表  Teacher(T#,Tname) 教师表 ...

  8. TI CC2541的LED控制

    现在终于进入到蓝牙SPI的环节了, 下面还要研究I2C, 所以第一步, 先点灯, 就是GPIO控制吧. 参考一下LEd的初始化: void HalLedInit (void){#if (HAL_LED ...

  9. Zero_qiqi DIV模式的省市区三级联动

    1].[代码] [HTML]代码 跳至 [1] [2] [3] [4] [5] [6] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  10. java final .static修饰符

    static静态修饰符(使用static修饰符修饰的成员变量.常量.和成员方法成为静态变量.常量和方法,他们统称为静态成员,归整个类所有,不依赖于类的特定实例,被类的所有实例共享,只要这个类被加载,J ...