帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:Webpack  COL  Collect  WEBP  DEMO  演示  WEB  collection  
a collection of simple demos of Webpack

  • 源代码名称:webpack-demos
  • 源代码网址:http://www.github.com/ruanyf/webpack-demos
  • webpack-demos源代码文档
  • webpack-demos源代码下载
  • Git URL:
    git://www.github.com/ruanyf/webpack-demos.git
  • Git Clone代码到本地:
    git clone http://www.github.com/ruanyf/webpack-demos
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/ruanyf/webpack-demos
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 这个 repo 是 web service简单演示的Collection 。

    这些演示是用简单清晰的方式编写的。 你会发现跟随他们来学习强大的工具没有困难。

    :如何使用

    首先,安装 webpack-dev-server全局。

    $ npm i -g webpack webpack-dev-server

    然后克隆 repo 。

    $ git clone https://github.com/ruanyf/webpack-demos.git

    安装依赖项。

    $ cd webpack-demos
    $ npm install

    现在,使用 repo 目录的demo*下的源文件。

    $ cd demo01
    $ npm run dev

    如果 above 命令没有自动打开浏览器,你必须访问 http://127.0.0.1: 8080

    的序言:web pack是什么

    webdav是为浏览器构建JavaScript模块脚本的前端工具。

    它可以与Browserify类似,而且做得更多。

    $ browserify main.js > bundle.js# be equivalent to$ webpack main.js bundle.js

    webdav需要一个名为 webpack.config.js的配置文件,它只是一个被CommonJS的模块。

    // webpack.config.jsmodule.exports= {
     entry:'./main.js',
     output: {
     filename:'bundle.js' }
    };

    在使用 webpack.config.js 之后,你可以不用任何参数调用 web pack 。

    $ webpack

    你应该知道的一些命令行选项。

    • webpack - 为开发而构建
    • webpack -p - 用于生产的建筑( 缩小)
    • webpack --watch --用于连续增量构建
    • webpack -d - 包括源映射
    • webpack --colors --使建筑输出非常漂亮

    你可以在 package.json 文件中自定义 scripts 字段,如下所示。

    // package.json{
     //.. ."scripts": {
     "dev":"webpack-dev-server --devtool eval --progress --colors",
     "deploy":"NODE_ENV=production webpack -p" },
     //.. .}

    索引

    : 输入文件( 源)

    Entry文件是 web pack读取以生成 bundle.js的文件。

    例如 main.js 是一个条目文件。

    // main.jsdocument.write('<h1>Hello World</h1>');

    index.html

    <html>
     <body>
     <scripttype="text/javascript"src="bundle.js"></script>
     </body>
    </html>

    web service遵循 webpack.config.js 来生成 bundle.js

    // webpack.config.jsmodule.exports= {
     entry:'./main.js',
     output: {
     filename:'bundle.js' }
    };

    启动服务器,访问 http://127.0.0.1: 8080.

    $ cd demo01
    $ npm run dev

    : 多个条目文件(

    允许多个条目文件。 对于每个页面有不同条目文件的多页面应用程序来说,它是很有用的。

    // main1.jsdocument.write('<h1>Hello World</h1>');// main2.jsdocument.write('<h2>Hello Webpack</h2>');

    index.html

    <html>
     <body>
     <scriptsrc="bundle1.js"></script>
     <scriptsrc="bundle2.js"></script>
     </body>
    </html>

    webpack.config.js

    module.exports= {
     entry: {
     bundle1:'./main1.js',
     bundle2:'./main2.js' },
     output: {
     filename:'[name].js' }
    };

    loader: babel加载器( )

    加载程序是 preprocessors,它在构建 web pack进程之前转换你的应用程序( 更多信息。)的资源文件。

    例如加载程序可以将 jsx/es6文件转换为普通的JS files,after,web service将开始构建这些JS文件。 webpack博士有一个完整的加载器列表列表。

    main.jsx 是一个JSX文件。

    // main.jsxconstReact=require('react');constReactDOM=require('react-dom');ReactDOM.render(
     <h1>Hello, world!</h1>,
     document.querySelector('#wrapper')
    );

    index.html

    <html>
     <body>
     <divid="wrapper"></div>
     <scriptsrc="bundle.js"></script>
     </body>
    </html>

    webpack.config.js

    module.exports= {
     entry:'./main.jsx',
     output: {
     filename:'bundle.js' },
     module: {
     rules: [
     {
     test:/.jsx?$/,
     exclude:/node_modules/,
     use: {
     loader:'babel-loader',
     options: {
     presets: ['es2015', 'react']
     }
     }
     }
     ]
     }
    };

    代码Fragment使用了需要预先设定babel插件 babel-preset-es2015babel-preset-react到 transpile ES6并做出响应的babel-loader

    : css加载程序(

    webdav允许你在JS文件中包含 CSS,然后使用 CSS加载程序预处理CSS文件。

    main.js

    require('./app.css');

    app.css

    body {
     background-color: blue;
    }

    index.html

    <html>
     <head>
     <scripttype="text/javascript"src="bundle.js"></script>
     </head>
     <body>
     <h1>Hello World</h1>
     </body>
    </html>

    webpack.config.js

    module.exports= {
     entry:'./main.js',
     output: {
     filename:'bundle.js' },
     module: {
     rules:[
     {
     test:/.css$/,
     use: [ 'style-loader', 'css-loader' ]
     },
     ]
     }
    };

    注意,你必须使用两个加载器来转换CSS文件。 首先是加载器读取CSS文件,另一个是样式加载器插件,将标签插入到HTML页面中。

    然后,启动服务器。

    $ cd demo04
    $ npm run dev

    实际上 web service将内部样式表插入到 index.html

    <head>
     <scripttype="text/javascript"src="bundle.js"></script>
     <styletype="text/css">body {background-color: blue; }</style>
    </head>

    : 图像加载程序(

    web service还可以包含JS文件中的图像。

    main.js

    var img1 =document.createElement("img");img1.src=require("./small.png");document.body.appendChild(img1);var img2 =document.createElement("img");img2.src=require("./big.png");document.body.appendChild(img2);

    index.html

    <html>
     <body>
     <scripttype="text/javascript"src="bundle.js"></script>
     </body>
    </html>

    webpack.config.js

    module.exports= {
     entry:'./main.js',
     output: {
     filename:'bundle.js' },
     module: {
     rules:[
     {
     test:/.(png|jpg)$/,
     use: [
     {
     loader:'url-loader',
     options: {
     limit:8192 }
     }
     ]
     }
     ]
     }
    };

    url加载程序将图像文件转换为标记。 如果图像大小小于 8192字节,将转换为数据 URL ;否则,将转换为普通 URL 。

    启动服务器后,small.pngbig.png 具有以下 url 。

    <imgsrc="data:image/png;base64,iVBOR...uQmCC">
    <imgsrc="4853ca667a2b8b8844eb2693ac1b2578.png">

    : CSS模块( 源代码)

    css-loader?modules ( 查询参数模块) 支持 CSS模块,它向你的Module模块提供本地范围 CSS 。 你可以用 :global(selector) ( 更多信息。) 把它 switch 。

    index.html

    <html>
    <body>
     <h1class="h1">Hello World</h1>
     <h2class="h2">Hello Webpack</h2>
     <divid="example"></div>
     <scriptsrc="./bundle.js"></script>
    </body>
    </html>

    app.css

    /* local scope */.h1 {
     color:red;
    }/* global scope */:global(.h2) {
     color: blue;
    }

    main.jsx

    var React =require('react');var ReactDOM =require('react-dom');var style =require('./app.css');ReactDOM.render(
     <div><h1 className={style.h1}>Hello World</h1><h2 className="h2">Hello Webpack</h2></div>,
     document.getElementById('example')
    );

    webpack.config.js

    module.exports= {
     entry:'./main.jsx',
     output: {
     filename:'bundle.js' },
     module: {
     rules:[
     {
     test:/.js[x]?$/,
     exclude:/node_modules/,
     use: {
     loader:'babel-loader',
     options: {
     presets: ['es2015', 'react']
     }
     }
     },
     {
     test:/.css$/,
     use: [
     {
     loader:'style-loader' },
     {
     loader:'css-loader',
     options: {
     modules:true }
     }
     ]
     }
     ]
     }
    };

    启动服务器。

    $ cd demo06
    $ npm run dev

    如果你使用的是 second,那么你会发现只有第二个 h1 是红色的,因为它的CSS是本地的,并且这两个 h2 是蓝色的,因为。

    : UglifyJs插件(

    web pack有一个插件系统来扩展它的功能。 例如 UglifyJs插件将缩小输出( bundle.js ) JS代码。

    main.js

    var longVariableName ='Hello';
    longVariableName +=' World';document.write('<h1>'+ longVariableName +'</h1>');

    index.html

    <html>
    <body>
     <scriptsrc="bundle.js"></script>
    </body>
    </html>

    webpack.config.js

    var webpack =require('webpack');var UglifyJsPlugin =require('uglifyjs-webpack-plugin');module.exports= {
     entry:'./main.js',
     output: {
     filename:'bundle.js' },
     plugins: [
     newUglifyJsPlugin()
     ]
    };

    启动服务器后,main.js 将被缩小到下列状态。

    var o="Hello";o+=" World",document.write("<h1>"+o+"</h1>")

    :HTML web pack插件和打开浏览器 web pack插件( )

    本演示向你展示了如何加载 3 rd插件插件。

    html-webpack-plugin可以为你创建 index.html,当 web pack载入时,open-browser-webpack-plugin插件可以打开一个新的浏览器标签。

    main.js

    document.write('<h1>Hello World</h1>');

    webpack.config.js

    var HtmlwebpackPlugin =require('html-webpack-plugin');var OpenBrowserPlugin =require('open-browser-webpack-plugin');module.exports= {
     entry:'./main.js',
     output: {
     filename:'bundle.js' },
     plugins: [
     newHtmlwebpackPlugin({
     title:'Webpack-demos',
     filename:'index.html' }),
     newOpenBrowserPlugin({
     url:'http://localhost:8080' })
     ]
    };

    启动服务器。

    $ cd demo08
    $ npm run dev

    现在你不需要手动编写 index.html,也不必自己打开浏览器。 web pack为你做了所有这些事情。

    :环境标志(源代码)

    你只能在开发环境中使用环境标志启用某些代码。

    main.js

    document.write('<h1>Hello World</h1>');if (__DEV__) {
     document.write(newDate());
    }

    index.html

    <html>
    <body>
     <scriptsrc="bundle.js"></script>
    </body>
    </html>

    webpack.config.js

    var webpack =require('webpack');var devFlagPlugin =newwebpack.DefinePlugin({
     __DEV__:JSON.stringify(JSON.parse(process.env.DEBUG||'false'))
    });module.exports= {
     entry:'./main.js',
     output: {
     filename:'bundle.js' },
     plugins: [devFlagPlugin]
    };

    现在将环境变量传递到 web pack 。 打开 demo09/package.json 后,应该会发现 scripts 字段如下。

    // package.json{
     //.. ."scripts": {
     "dev":"cross-env DEBUG=true webpack-dev-server --open",
     },
     //.. .}

    启动服务器。

    $ cd demo09
    $ npm run dev

    :代码分割(源代码)

    对于大型网络应用程序,将所有代码放入单个文件是无效的。 webdav允许你将一个大的JS文件分割成几个块。 特别是,如果在某些情况下只需要一些代码块,那么这些块就可以按需加载。

    web pack使用 require.ensure 来定义分割点( 官方文档。) 。

    // main.jsrequire.ensure(['./a'], function (require) {
     var content =require('./a');
     document.open();
     document.write('<h1>'+ content +'</h1>');
     document.close();
    });

    require.ensure 告诉 web pack ./a.js 应该与 bundle.js 分开,并构建到单个区块文件中。

    // a.jsmodule.exports='Hello World';

    web pack负责依赖项,输出文件和运行时内容。 你不必在 index.htmlwebpack.config.js 中放入任何冗余。

    <html>
     <body>
     <scriptsrc="bundle.js"></script>
     </body>
    </html>

    webpack.config.js

    module.exports= {
     entry:'./main.js',
     output: {
     filename:'bundle.js' }
    };

    启动服务器。

    $ cd demo10
    $ npm run dev

    在表面上你不会感觉到。 然而 web pack实际上将 main.jsa.js 构建成不同的块( bundle.js0.bundle.js ),并根据需要从 bundle.js 加载 0.bundle.js

    :使用捆绑器加载器进行代码分割(源代码

    代码分割的另一种方法是使用捆绑包加载器。

    // main.js// Now a.js is requested, it will be bundled into another filevar load =require('bundle-loader!./a.js');// To wait until a.js is available (and get the exports)// you need to async wait for it.load(function(file) {
     document.open();
     document.write('<h1>'+ file +'</h1>');
     document.close();
    });

    require('bundle-loader./a.js') 告诉 web pack从另一个块加载 a.js 。!

    web pack将把 main.js 构建到 bundle.js 中,a.js 构建到 0.bundle.js 中。

    : 公共块(

    多脚本具有公共块时,可以使用 CommonsChunkPlugin插件将公共部分提取到单独的文件中,这对浏览器缓存和节省带宽非常有用。

    // main1.jsxvar React =require('react');var ReactDOM =require('react-dom');ReactDOM.render(
     <h1>Hello World</h1>,
     document.getElementById('a')
    );// main2.jsxvar React =require('react');var ReactDOM =require('react-dom');ReactDOM.render(
     <h2>Hello Webpack</h2>,
     document.getElementById('b')
    );

    index.html

    <html>
     <body>
     <divid="a"></div>
     <divid="b"></div>
     <scriptsrc="commons.js"></script>
     <scriptsrc="bundle1.js"></script>
     <scriptsrc="bundle2.js"></script>
     </body>
    </html>

    above commons.jsmain1.jsxmain2.jsx的公共块。 如你所见,commons.js 包含 reactreact-dom

    webpack.config.js

    var webpack =require('webpack');module.exports= {
     entry: {
     bundle1:'./main1.jsx',
     bundle2:'./main2.jsx' },
     output: {
     filename:'[name].js' },
     module: {
     rules:[
     {
     test:/.js[x]?$/,
     exclude:/node_modules/,
     use: {
     loader:'babel-loader',
     options: {
     presets: ['es2015', 'react']
     }
     }
     },
     ]
     },
     plugins: [
     newwebpack.optimize.CommonsChunkPlugin({
     name:"commons",
     // (the commons chunk name) filename:"commons.js",
     // (the filename of the commons chunk) })
     ]
    }

    :供应商区块(源代码)

    你还可以使用CommonsChunkPlugin将供应商库从脚本中提取到单独的文件中。

    main.js

    var $ =require('jquery');$('h1').text('Hello World');

    index.html

    <html>
     <body>
     <h1></h1>
     <scriptsrc="vendor.js"></script>
     <scriptsrc="bundle.js"></script>
     </body>
    </html>

    webpack.config.js

    var webpack =require('webpack');module.exports= {
     entry: {
     app:'./main.js',
     vendor: ['jquery'],
     },
     output: {
     filename:'bundle.js' },
     plugins: [
     newwebpack.optimize.CommonsChunkPlugin({
     name:'vendor',
     filename:'vendor.js' })
     ]
    };

    在 above 代码中,entry.vendor: ['jquery'] 告诉webdav应该将 jquery 包含在公共块 vendor.js 中。

    如果需要模块在每个模块中作为全局变量,比如使 $jquery 可以以在每个模块中使用 require("jquery") 。 你应该使用 ProvidePlugin ( 。官方文档) 自动加载模块,而无需导入或者要求它们到处都是。

    // main.js$('h1').text('Hello World');// webpack.config.jsvar webpack =require('webpack');module.exports= {
     entry: {
     app:'./main.js' },
     output: {
     filename:'bundle.js' },
     plugins: [
     newwebpack.ProvidePlugin({
     $:'jquery',
     jQuery:'jquery' })
     ]
    };

    当然,在这种情况下,你应该通过自己加载 jquery.js

    : 公开全局变量(

    如果想使用一些全局变量,并且不希望在 web pack包中包含它们,可以在 webpack.config.js ( 官方文档。) 中启用 externals 字段。

    例如我们有一个 data.js

    // data.jsvar data ='Hello World';

    index.html

    <html>
     <body>
     <scriptsrc="data.js"></script>
     <scriptsrc="bundle.js"></script>
     </body>
    </html>

    注意,web pack只生成 bundle.js,但不生成 data.js

    我们可以将 data 公开为全局变量。

    // webpack.config.jsmodule.exports= {
     entry:'./main.jsx',
     output: {
     filename:'bundle.js' },
     module: {
     rules:[
     {
     test:/.js[x]?$/,
     exclude:/node_modules/,
     use: {
     loader:'babel-loader',
     options: {
     presets: ['es2015', 'react']
     }
     }
     },
     ]
     },
     externals: {
     // require('data') is external and available// on the global var data'data':'data' }
    };

    现在,你需要 data 作为脚本中的模块变量。 但它实际上是一个全局变量。

    // main.jsxvar data =require('data');var React =require('react');var ReactDOM =require('react-dom');ReactDOM.render(
     <h1>{data}</h1>,
     document.body);

    你还可以将 reactreact-dom 放入 externals,这将极大地提高构建的时间和构建的规模。

    :响应路由器(源插件)

    这个演示使用 web pack来构建反应路由器( ) 。

    让我们想象一个带有仪表板,收件箱和日历的小应用程序。

    +---------------------------------------------------------+
    | +---------+ +-------+ +--------+ |
    | |Dashboard| | Inbox | |Calendar| Logged in as Jane |
    | +---------+ +-------+ +--------+ |
    +---------------------------------------------------------+
    | |
    | Dashboard |
    | |
    | |
    | +---------------------+ +----------------------+ |
    | | | | | |
    | | + + | +---------> | |
    | | | | | | | |
    | | | + | | +-------------> | |
    | | | | + | | | | |
    | | | | | | | | | |
    | +-+---+----+-----+----+ +----------------------+ |
    | |
    +---------------------------------------------------------+

    webpack.config.js

    module.exports= {
     entry:'./index.js',
     output: {
     filename:'bundle.js' },
     module: {
     rules: [
     {
     test:/.css$/,
     use: [ 'style-loader', 'css-loader' ]
     },
     {
     test:/.jsx?$/,
     exclude:/node_modules/,
     use: {
     loader:'babel-loader',
     options: {
     presets: ['es2015', 'react']
     }
     }
     },
     ]
     }
    };

    index.js

    importReactfrom'react';import { render } from'react-dom';import { BrowserRouter, Switch, Route, Link } from'react-router-dom';import'./app.css';classAppextendsReact.Component {
     render() {
     return (
     <div><header><ul><li><Link to="/app">Dashboard</Link></li><li><Link to="/inbox">Inbox</Link></li><li><Link to="/calendar">Calendar</Link></li></ul> Logged in as Jane
     </header><main><Switch><Route exact path="/" component={Dashboard}/><Route path="/app" component={Dashboard}/><Route path="/inbox" component={Inbox}/><Route path="/calendar" component={Calendar}/><Route path="*" component={Dashboard}/></Switch></main></div> );
     }
    };classDashboardextendsReact.Component {
     render() {
     return (
     <div><p>Dashboard</p></div> );
     }
    };classInboxextendsReact.Component {
     render() {
     return (
     <div><p>Inbox</p></div> );
     }
    };classCalendarextendsReact.Component {
     render() {
     return (
     <div><p>Calendar</p></div> );
     }
    };render((
     <BrowserRouter><Route path="/" component={App} /></BrowserRouter>), document.querySelector('#app'));

    index.html

    <html>
     <body>
     <divid="app"></div>
     <scriptsrc="/bundle.js"></script>
     </body>
    </htmL>

    启动服务器。

    $ cd demo15
    $ npm run dev

    有用的链接

    许可证

    MIT



    文章标签:WEB  COL  Collect  collection  DEMO  WEBP  Webpack  演示  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语