Webpack:前端资源模块化管理和打包工具

一.介绍:

    Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生

  产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转

  换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、  

  Coffeescript、 LESS等。

    Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的

  静态资源。

二.Webpack 和其他模块化工具有什么区别呢?

  1.代码拆分:

  2.Loader:

  3.智能解析:

  4.插件系统:

  5.快速运行:

三.安装使用:

  1.用 cnpm 全局安装 Webpack: cnpm install webpack -g

  2.本地安装使用:cnpm install webpack --save-dev

  3.项目初始化:

    (1).建立mywebpack文件夹并初始化项目:C:\mywebpack>npm init

    (2).如果不是实际项目可以一路回车完成初始化,安装本地webpack:C:\mywebpack>cnpm install webpack --save-dev  完成安装。可以使用 C:\mywebpack>dnpm info webpack 查看webpack 的版

      本;也可以看到package.json中例如:

        "devDependencies": {
          "webpack": "^1.14.0"
         }

        webpack安装成功!

    (3).使用webpack:

       首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js:       

        <!-- index.html -->
        <html>
        <head>
          <meta charset="utf-8">
        </head>
        <body>
          <script src="bundle.js"></script>
        </body>
      </html>
      // entry.js
      document.write('It works.')

      然后编译 entry.js 并打包到 bundle.js: C:\mywebpack> webpack entry.js bundle.js

      用浏览器打开 index.html 将会看到 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.

    (4).Loader:Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader

        进行转换。

      上一节的例子,我们要在页面中引入一个 CSS 文件 style.css,首页将 style.css 也看成是一个模块,

      然后用 css-loader 来读取它,再用 style-loader 把它插入到页面中  

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

      修改 entry.js:

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

      安装 loader:

      C:\mywebpack>cnpm install css-loader style-loader
      重新编译打包,刷新页面,就可以看到黄色的页面背景了。
      
      如果每次 require CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(扩展名)来自动绑定需要的 loader。

      将 entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css") ,然后执行:

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

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

      显然,这两种使用 loader 的方式,效果是一样的。

    (5).配置文件:继续我们的案例,在根目录创建 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": "",
        "license": "ISC",
        "devDependencies": {
          "css-loader": "^0.21.0",
          "style-loader": "^0.13.0",
          "webpack": "^1.12.2"
         }
        }

      运行C:\mywebpack>cnpm 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!css'}
         ]
        }
        }

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

      require('./style.css')

      webpack 通过配置文件执行的结果和上一章节通过命令行 :

      C:\mywebpack>webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的.

    (6).插件:

      接下来,我们利用一个最简单的 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!css'}
         ]
        },
        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 = {};
          // 后面代码省略

    (7).开发环境:

        当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色:

          C:\mywebpack>webpack --progress --colors

        如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编

       译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。

          C:\mywebpack>webpack --progress --colors --watch

        使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静

      态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/  

      可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新

      页面。

        # 安装

         C:\mywebpack>cnpm install webpack-dev-server -g    

        # 运行

         C:\mywebpack>webpack-dev-server --progress --colors

四.注意事项:记得每次打包到bundle.js的时候需要清空bundle.js中的内容不然文件会被多次打包加入其中,显示内容会出错。

      

上一篇:前端jquery---表单验证


下一篇:eslint error