• WebPack 学习:从阮神的15个DEMO开始


    WebPack 是什么

    官方就一句话,打包所有的资源

    从阮神的 15 DEOM入手 Webpack

    Github 地址

    阮神GIT

    按照 ReadME 操作

    • npm webpack-dev-server ,为了能够运行起来demo的代码
    • cd 到任何一个demo下,执行npm run dev 即可运行demo

    npm run dev 是在 demo下的package.json文件中 配置的 script,实际上是在执行 webpack-dev-server --open

    对DEMO拆解

    • 准备工作:

      • 请保证电脑上有npm
      • 创建一个文件夹 webpack-tutorial
      • cmd cd到上面的文件夹,键入 npm init 根据提示步骤创建package.json文件,可以一直enter
      • npm install webpack webpack-cli webpack-dev-server 安装需要的包
    • demo1 :单个入口

      • 创建 webpack.config.js文件,代码如下
      module.exports = {
        entry: './main.js',//入口文件是当前目录下的 main.js文件
        output: {
          filename: 'bundle.js'//打包后的文件名称是 bundle.js
          //这里webpack会自动创建dist文件夹,将bundle.js放到里面。
          //这里的./会指定到 dist下
          //比如 filename:'./js/bundle.js' 会在dist下找js文件夹放入bundle.js文件
         	//可以通过path指定不同的目录
        }
      };
      
      • 创建 main.js文件 ,代码如下:
      // main.js
      document.write('<h1>Hello World</h1>');//往页面上写hello world
      
      • CMD中键入 webpack进行打包,键入进行开启
      //webpack 输出 
          Asset       Size  Chunks             Chunk Names
      bundle.js  968 bytes       0  [emitted]  main
      Entrypoint main = bundle.js
      
      webpack-dev-server --open 
       //打开浏览器后发现是一个ftp的页面
       //我们下面将自动创建index.html文件
      
      • CMD 键入
       npm install html-webpack-plugin
       //安装自动生成html插件
      
      • 重新编辑 webpack.config.js
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      module.exports = {
        entry: './main.js',//入口文件是当前目录下的 main.js文件
        output: {
          filename: 'bundle.js'//打包后的文件名称是 bundle.js
          //这里webpack会自动创建dist文件夹,将bundle.js放到里面。
          //这里的./会指定到 dist下
          //比如 filename:'./js/bundle.js' 会在dist下找js文件夹放入bundle.js文件
         	//可以通过path指定不同的目录
        },
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
        ]
      };
      
      • 重新CMD 键入 webpack 打包 ,键入 webpack-dev-server --open 开启server
      //webpack输出 
          Asset       Size  Chunks             Chunk Names
       bundle.js  968 bytes       0  [emitted]  main
      index.html  187 bytes          [emitted]
      Entrypoint main = bundle.js
      

      会发现 dist 文件夹下自动生成了 index.html并且引入 打包好的 bundle.js文件,浏览器正常显示一个h1的hello world

    • demo2 :两个入口

      • 更改 webpack.config.js 文件如下:
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      module.exports = {
        entry: {
          bundle1: './main1.js',//入口1 main1.js
          bundle2: './main2.js'//入口2 main2.js
        },
        output: {
          filename: '[name].js'//name是entry的键名,最后会生成bundle1.js bundle2.js
        },
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
        ]
      };
      
      • 分别创建 main1.js 与main2.js
      // main1.js
      document.write('<h1>Hello World</h1>');
      // main2.js
      document.write('<h2>Hello Webpack</h2>');
      
      • CMD 键入 webpack 打包 ,键入 webpack-dev-server --open 开启server
      //webpack 输出
           Asset       Size  Chunks             Chunk Names
      bundle1.js  968 bytes       0  [emitted]  bundle1
      bundle2.js  971 bytes       1  [emitted]  bundle2
      index.html  245 bytes          [emitted]
      Entrypoint bundle1 = bundle1.js
      Entrypoint bundle2 = bundle2.js
      [0] ./main1.js 39 bytes {0} [built]
      [1] ./main2.js 41 bytes {1} [built]
      

      会在dist下 创建 bundle1.js/bundle2.js/index.html,浏览器会有h1的helloworld h2的hellowebpack

    • demo3 :Babel-loader 的使用

    什么loaders:就是webpack使用loaders来预处理文件,允许打包除了js文件外任何静态资源。

    什么是Babel-loader:是javascript编译器,将现行的javascript代码变成浏览器可以兼容的代码。

      • 例子中是 react 所有我们先安装下相关的包
      npm install react react-dom//js 用到
      npm install babel-loader babel-core babel-preset-es2015 babel-preset-react
      //这里说明一下 babel-loader单独安装一下7.1.5的版本,因为最新的8版本 打包时会报错
      
      • 创建main.jsx文件
      // main.jsx
      //我们需要增加一部分代码
      //增加一个创建wrapper div的过程
      //这边我的index.html是自动创建的,打包后在更改 会报错
      //不知道阮神是怎么弄的,等我研究明白了再回来说明一下
      //如下方法可成功显示
      var div = document.createElement('div');  
      div.id = 'wrapper';  
      document.body.appendChild(div);
      //结束
      const React = require('react');
      const ReactDOM = require('react-dom');
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.querySelector('#wrapper')//将h1这个标签放到 id是wrapper的div中
      );
      
      • 修改webpack.config.js文件
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      module.exports = {
        entry: './main.jsx',//不说明了
        output: {
          filename: 'bundle.js'
        },
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
        ],
      	module: {
          rules: [
            {
              test: /.jsx?$/,//匹配.jsx文件
              exclude: /node_modules/,//不包含这个文件夹 npm包
              use: {
                loader: 'babel-loader',//使用babel-loader这个
                options: {
                  presets: ['es2015', 'react']//使用 es2015 跟react
                  //这里说明一下,这里的顺序是从右到左加载的,即,先用react再用es2015
                }
              }
            }
          ]
        }
      };
      
      • CMD 键入 webpack 打包 ,键入 webpack-dev-server --open 开启server
      //webpack 输出
           Asset       Size  Chunks                    Chunk Names
       bundle.js    248 KiB       0  [emitted]  [big]  main
      index.html  187 bytes          [emitted]
      
    • demo4 :css-loader使用

      • cmd 键入
      npm install css-loader style-loader
      
      • 创建 app.css文件
      body {
        background-color: blue;
      }
      
      • 更改 webpack.config.js,增加一个css-loader
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      module.exports = {
        entry: './main.js',
        output: {
          filename: 'bundle.js'
        },
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
        ],
      	module: {
          rules: [
            {
              test: /.jsx?$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015', 'react']
                }
              }
            },
      			{
              test: /.css$/,
              use: [ 'style-loader', 'css-loader' ]//同样的 从右到左加载
            },
          ]
        }
      };
      
      • 更改main.js文件
      require('./app.css');
      
      • CMD 键入 webpack 打包 ,键入 webpack-dev-server --open 开启server
      //webpack 输出
         Asset       Size  Chunks             Chunk Names
       bundle.js    147 KiB       0  [emitted]  main
      index.html  187 bytes          [emitted]
      
    • demo5 :image loader

    不做赘述,需要 npm url-loader。与上一个demo类似

    • demo6 : CSS Module

    Css Module:给CSS加入了局部作用域和模块依赖。详情还是请看阮神博客。还有官网

    本次demo 只是介绍了局部作用于与全局作用域。

      • 更改main.jsx文件。同样我们增加一部分代码。
      //增加start
      var div = document.createElement('div');  
      div.id = 'example';  
      document.body.appendChild(div);
      
      var h1 = document.createElement('h1');  
      h1.className="h1";
      var t1=document.createTextNode("Hello World");
      h1.appendChild(t1);
      document.body.appendChild(h1);
      
      var h2 = document.createElement('h2');
      h2.className="h2";  
      var t2=document.createTextNode("Hello Webpack");
      h2.appendChild(t2);
      document.body.appendChild(h2);
      //end
      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
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      module.exports = {
        entry: './main.jsx',//每次看好打包的入口文件呦
        output: {
          filename: 'bundle.js'
        },
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
        ],
      	module: {
          rules: [
            {
              test: /.jsx?$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015', 'react']
                }
              }
            },
      			{
              test: /.css$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {//使用module
                   loader: 'css-loader',
                   options: {
                     modules: true
                   }
                }
              ]
            }
          ]
        }
      };
      
      • 更改app.css
      /* local scope */
      .h1 {
        color:red;
      }
      
      /* global scope */
      :global(.h2) {
        color: blue;
      }
      
      • CMD 键入 webpack 打包 ,键入 webpack-dev-server --open 开启server
          Asset       Size  Chunks             Chunk Names
       bundle.js   6.89 KiB       0  [emitted]  main
      index.html  187 bytes          [emitted]
      
      • 结果是 有一个红色字体的h1 一个黑色字体的h1 两个蓝色字体的h2, 因为h2 的class是global的 h1的local的
    • demo7:使用 uglifyjs 插件

    什么事uglifyjs 插件:将输出的文件bundle.js变到最小。丑化js代码。

    这里需要注意webpack 两种模式的 产品模式下 uglifyjs插件是默认开启的我们需要在development模式下搞

      • 更改main.js使用阮神demo中的代码:
      var longVariableName = 'Hello';
      longVariableName += ' World';
      document.write('<h1>' + longVariableName + '</h1>');
      
      • 在webpack.config.js文件中加入如下配置:
      mode: 'development',//开发者模式
      
      • 我们先打包一次main.js打包成的bundle.js的大小为3.89kb,然后使用插件。这个时候bundle.js可读
      • npm install uglifyjs-webpack-plugin,更改webpack.config.js,加一个插件其他不更改
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
      
      module.exports = {
        entry: './main.js',//每次看好打包的入口文件呦
        output: {
          filename: 'bundle.js'
        },
        //加入html自动生成
        mode: 'development',//开发者模式
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
      		new UglifyJsPlugin(),//开发者模式下使用插件
        ],
      	module: {
          rules: [
            {
              test: /.jsx?$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015', 'react']
                }
              }
            },
      			{
              test: /.css$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {
                   loader: 'css-loader',
                   options: {
                     modules: true
                   }
                }
              ]
            }
          ]
        }
      };
      
      • CMD 键入 webpack 打包 ,查看bundle.js大小1.23KB
    • demo8 :html-webpack-plugin与open-browser-webpack-plugin两个插件。

    html-webpack-plugin:自动生成html插件。这个插件我们已经使用啦,不介绍了。

    open-browser-webpack-plugin:自动打开浏览器插件。

      • npm install open-browser-webpack-plugin,更改webpack.config.js如下
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
      var OpenBrowserPlugin = require('open-browser-webpack-plugin');
      module.exports = {
        entry: './main.js',//每次看好打包的入口文件呦
        output: {
          filename: 'bundle.js'
        },
      	mode: 'development',
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
      		new UglifyJsPlugin(),
      		new OpenBrowserPlugin({
            url: 'http://localhost:8080'//开启服务后自动打开这个网址
          })
        ],
      	module: {
          rules: [
            {
              test: /.jsx?$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015', 'react']
                }
              }
            },
      			{
              test: /.css$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {
                   loader: 'css-loader',
                   options: {
                     modules: true
                   }
                }
              ]
            }
          ]
        }
      };
      
      • CMD 键入 webpack 打包 ,键入 webpack-dev-server 开启server,不需要--open了 否则会打开两个页面
    • demo9 :Environment flags

    在开发时,有些东西要放出来,产品环境时需要屏蔽掉。我们可以定一个变量去看当前的模式。

      • 更改main.js
      document.write('<h1>Hello World</h1>');
      
      if (__DEV__) {//__DEV__ 在webpack.config.js中定义
        document.write(new Date());
      }
      
      • webpack.config.js
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
      var OpenBrowserPlugin = require('open-browser-webpack-plugin');
      
      var devFlagPlugin = new webpack.DefinePlugin({
        __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
      });
      
      
      module.exports = {
        entry: './main.js',//每次看好打包的入口文件呦
        output: {
          filename: 'bundle.js'
        },
      	mode: 'development',
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
      		new UglifyJsPlugin(),
      		new OpenBrowserPlugin({
            url: 'http://localhost:8080'
          }),
      		devFlagPlugin,
        ],
      	module: {
          rules: [
            {
              test: /.jsx?$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015', 'react']
                }
              }
            },
      			{
              test: /.css$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {
                   loader: 'css-loader',
                   options: {
                     modules: true
                   }
                }
              ]
            }
          ]
        }
      };
      
      • webpack 打包,并输入cross-env DEBUG=true webpack-dev-server,来控制debug

      阮神是想通过命令将当前是否是debug传入到程序中,我们更改一下代码。官网上介绍可以使用process.env.NODE_ENV来访问当前的mode。

      • main.js
      document.write('<h1>Hello World</h1>');
      
      if (process.env.NODE_ENV=="development") {
        document.write(new Date());
      }
      
      • 直接看页面。注:更改了config文件需要重新打包其他的不需要。
    • demo10 :code splitting

    code splitting:打包时,分文件打包

      • main.js
      // main.js
      require.ensure(['./a'], function (require) {
        var content = require('./a');
        document.open();
        document.write('<h1>' + content + '</h1>');
        document.close();
      });
      
      • 创建a.js
      // a.js
      module.exports = 'Hello World';
      
      • 其他不变,直接webpack打包,多生成了0.bundle.js文件
      //wepack 输出
           Asset       Size  Chunks             Chunk Names
      0.bundle.js  307 bytes       0  [emitted]
        bundle.js   2.45 KiB    main  [emitted]  main
       index.html  187 bytes          [emitted]
      
    • demo 11:Code splitting with bundle-loader

      • 这个与demo10 一样,npm install bundle-loader后直接更改 main.js
      // main.js
      
      // Now a.js is requested, it will be bundled into another file
      var 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();
      });
      
      • 直接webpack打包:效果是相同的
        Asset       Size  Chunks             Chunk Names
      0.bundle.js  307 bytes       0  [emitted]
        bundle.js   2.45 KiB    main  [emitted]  main
       index.html  187 bytes          [emitted]
      
    • demo12:Common chunk

    是自动将相同代码打包成一个common.js

      • 这里需要说明,阮神的做法在webpack4中已经废弃了,现在可以直接使用,更改webpack.config.js
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
      var OpenBrowserPlugin = require('open-browser-webpack-plugin');
      var webpack = require('webpack');
      var devFlagPlugin = new webpack.DefinePlugin({
        __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV || 'false'))
      });
      
      
      module.exports = {
        entry: {
          bundle1: './main1.jsx',
          bundle2: './main2.jsx'
        },
        output: {
          filename: '[name].js'
        },
      	mode: 'development',
      	//增加了这个配置即可
      	optimization: {
      		splitChunks: {      // old CommonsChunkPlugin
      			chunks: "all"
      		},
      	},
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
      		//new UglifyJsPlugin(),//我们想看打包后的文件,注释掉这个
      		new OpenBrowserPlugin({
            url: 'http://localhost:8080'
          }),
      		devFlagPlugin,
        ],
      	module: {
          rules: [
            {
              test: /.jsx?$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015', 'react']
                }
              }
            },
      			{
              test: /.css$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {
                   loader: 'css-loader',
                   options: {
                     modules: true
                   }
                }
              ]
            }
          ]
        }
      };
      
      • 创建main1.jsx main2.jsx
      // main1.jsx
      var React = require('react');
      var ReactDOM = require('react-dom');
      
      ReactDOM.render(
        <h1>Hello World</h1>,
        document.getElementById('a')
      );
      
      // main2.jsx
      var React = require('react');
      var ReactDOM = require('react-dom');
      
      ReactDOM.render(
        <h2>Hello Webpack</h2>,
        document.getElementById('b')
      );
      
      • 直接webpack打包,会多一个vendorsbundle1bundle2.js文件,
                           Asset       Size                   Chunks             Chunk Names
                      bundle1.js   6.72 KiB                  bundle1  [emitted]  bundle1
                      bundle2.js   6.72 KiB                  bundle2  [emitted]  bundle2
                      index.html  318 bytes                           [emitted]
      vendors~bundle1~bundle2.js    832 KiB  vendors~bundle1~bundle2  [emitted]  vendors~bundle1~bundle2
      
    • demo13 :vendor chunk

    作用:将某一部分类库,打包到vendor js中。需要先 npm install jquery

      • main.js
      var $ = require('jquery');
      $('h1').text('Hello World');
      
      • webpack .config.js
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
      var OpenBrowserPlugin = require('open-browser-webpack-plugin');
      var webpack = require('webpack');
      var devFlagPlugin = new webpack.DefinePlugin({
        __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV || 'false'))
      });
      
      
      module.exports = {
        entry: {
          app: './main.js',
          vendor: ['jquery'],
        },//每次看好打包的入口文件呦
        output: {
          filename: '[name].js'
        },
      	mode: 'development',
      	optimization: {
      		splitChunks: {      // old CommonsChunkPlugin
      			chunks: "all"
      		},
      	},
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
      		//new UglifyJsPlugin(),
      		new OpenBrowserPlugin({
            url: 'http://localhost:8080'
          }),
      		devFlagPlugin,
        ],
      	module: {
          rules: [
            {
              test: /.jsx?$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015', 'react']
                }
              }
            },
      			{
              test: /.css$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {
                   loader: 'css-loader',
                   options: {
                     modules: true
                   }
                }
              ]
            }
          ]
        }
      };
      
      • webpack 打包
      # webpack 输出
         Asset       Size  Chunks             Chunk Names
            0.js  552 bytes       0  [emitted]
          app.js   9.39 KiB     app  [emitted]  app
      index.html  240 bytes          [emitted]
       vendor.js    305 KiB  vendor  [emitted]  vendor
      
      • 说明下,阮神还是用的CommonsChunkPlugin,但是webpack4已经废弃了,其实本例的最后完成方法就类似于两个入口文件了,只不过其中一个的意思是所有的jquery包,打包到vendor.js中
      • 这个例子最后阮神还介绍了一种不需要一直require包的方法
      • webpack.config.js
      var HtmlwebpackPlugin = require('html-webpack-plugin');
      var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
      var OpenBrowserPlugin = require('open-browser-webpack-plugin');
      var webpack = require('webpack');
      var devFlagPlugin = new webpack.DefinePlugin({
        __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV || 'false'))
      });
      
      
      module.exports = {
        entry: {
          app: './main.js',
          vendor: ['jquery'],
        },//每次看好打包的入口文件呦
        output: {
          filename: '[name].js'
        },
      	mode: 'development',
      	optimization: {
      		splitChunks: {      
      			name (module) {
              // generate a chunk name...
              return; //...
            }
      		},
      	},
        //加入html自动生成
        plugins:[
          new HtmlwebpackPlugin({
            title: 'Webpack-tutorial',
            filename: 'index.html'
          }), 
      		//new UglifyJsPlugin(),
      		new OpenBrowserPlugin({
            url: 'http://localhost:8080'
          }),
      		devFlagPlugin,
      		//增加定义$ jquery 随时可以使用
      	new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
          })
        ],
      	module: {
          rules: [
            {
              test: /.jsx?$/,
              exclude: /node_modules/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['es2015', 'react']
                }
              }
            },
      			{
              test: /.css$/,
              use: [
                {
                  loader: 'style-loader'
                },
                {
                   loader: 'css-loader',
                   options: {
                     modules: true
                   }
                }
              ]
            }
          ]
        }
      };
      
      • 删除掉main.js中的 ,会发现 var $ = require('jquery');正常使用
    • demo14:Exposing global variables

    作用:定义一些全局变量,并在代码中使用它。

      • 创建文件 data.js
      var data = 'Hello World';//定义全局变量
      
      • 更改 main.jsx 文件
      // main.jsx
      var data = require('data');
      var React = require('react');
      var ReactDOM = require('react-dom');
      
      ReactDOM.render(
        <h1>{data}</h1>,
        document.body
      );
      
      • webpack.config.js 文件
      //增加如下配置
      	externals: {
          // require('data') is external and available
          //  on the global var data
          'data': 'data'
        }
      
      • webpack打包
      # webpack 输出
       Asset     Size  Chunks             Chunk Names
      app.js  837 KiB     app  [emitted]  app
      Entrypoint app = app.js
      [./main.js] 189 bytes {app} [built]
      [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {app} [built]
      [data] external "data" 42 bytes {app} [built]
      # 可以看到external data 这个变量可以require后使用了
      
      • 不知到为什么,我使用html-webpack-plugin创建index.html后 不好使,而我在dist同级目录下创建一个index.html放入如下代码:打包开启server后,就能够正常显示data的数据了,最后也没弄清楚。
      <html>
        <body>
          <script src="data.js"></script>
          <script src="app.js"></script>
        </body>
      </html>
      
    • demo 15:React router

    关于这段react 留着以后再研究。

    总结

    至此阮神的15DEMO演示完毕,本人也是先从官网看的文档,看的很迷糊,一些概念性的东西,完全没头没脑的看,通过一些简单的配置,可以对webpack有一个更好地理解。

  • 相关阅读:
    递增一个指针
    ubuntu 系统 sudo apt-get update遇到问题sub-process returned an error code
    熟悉HDFS过程中遇到的问题
    大二暑假第八周进度报告
    大二暑假第七周进度报告
    oracle“ORA-00904”错误:标识符无效
    大学暑假第六周进度报告
    大二暑假第五周进度报告
    使用Navicat for Oracle新建表空间、用户及权限赋予
    大学暑假第四周进度报告
  • 原文地址:https://www.cnblogs.com/primadonna/p/10082867.html
Copyright © 2020-2023  润新知