3-WebPack

一、什么是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文件
  ],

posted @ 2017-01-04 22:44 shelfy 阅读(193) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

shelffe

3-WebPack

一、什么是WebPack

工作方式

二、安装

三、建立项目

四、WebPack 配置

1、基础配置

2、本地服务器配置

3、快捷命令

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

五、Loaders

六、插件（Plugins）

公告

shelffe

3-WebPack

一、 什么是WebPack

工作方式

二、安装

三、建立项目

四、WebPack 配置

1、基础配置

2、本地服务器配置

3、快捷命令

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

五、Loaders

六、插件（Plugins）

公告

一、什么是WebPack