[翻译]阮一峰webpack教程（Demo集合）

最新推荐文章于 2024-09-11 14:47:47 发布
最新推荐文章于 2024-09-11 14:47:47 发布
阅读量1k 收藏 5
点赞数
文章标签： webpack json javascript ViewUI
原文链接：https://juejin.im/post/5b42d4dce51d45195c070cd0
版权

翻译它主要是用于学习Webpack，原地址为github.com/ruanyf/webp…

安装使用指南

首先，全局安装Webpack和webpack-dev-server

$ npm i -g webpack webpack-dev-server
复制代码

然后克隆clone阮一峰的仓库

$ git clone https://github.com/ruanyf/webpack-demos.git
复制代码

安装依赖

$ cd webpack-demos
$ npm install
复制代码

现在开始进入demo*目录并且运行它们

$ cd demo01
$ npm run dev
复制代码

上面的代码不会自动的打开你的浏览器，需要手动访问http://127.0.0.1:8080

前言：Webpack是什么

Webpack用于构建Javascript模块脚本来给浏览器使用的前端工具。
它和Browserify很像，但是能做更多的事~

$ browserify main.js > bundle.js
# 上下代码作用相同
$ webpack main.js bundle.js
复制代码

Webpack需要一个名为webpack.config.js的配置文件，这个文件就是一个CommonJS的模块（module）

// webpack.config.js的内容
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};
复制代码

当建好webpack.config.js后就能直接运行Webpack，而不加参数

$ webpack
复制代码

有一些必须知道的参数选项如下

  • webpack——开发时的构建命令
  • webpack -p——发布产品时的构建命令
  • webpack --watch——用于增量开发的构建
  • webpack -d——包括source maps
  • webpack --colors——让构建输出更好看

可以在定制webpack.config.js中的scripts选项，如下所示

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

Demo01:入口文件

入口文件用来Webpack读取它然后构建bundle.js
例如下面，main.js就是一个入口文件

// main.js
document.write('<h1>Hello World</h1>');
复制代码

index.html

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>
复制代码

Webpack依据webpack.config.js来构建bundle.js

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};
复制代码

运行下面的命令然后访问http://127.0.0.1:8080

$ cd demo01
$ npm run dev
复制代码

Demo02:多个入口文件

Webpack允许多个入口文件存在，在多页面的app中很有用，每个页面有不同的入口文件。

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

// main2.js
document.write('<h2>Hello Webpack</h2>');
复制代码

index.html

<html>
  <body>
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
  </body>
</html>
复制代码

webpack.config.js

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

Demo03:Babel-loader

加载器(Loaders)是一些预处理器，用于在Webpack的构建过程前，将你app里的一些资源文件进行转换。
例如，Babel-loader能够将JSX/ES6文件转为普通的JS文件，之后Webpack能够开始构建它们。Webpack官方文档有一个加载器的列表地址
main.jsx是一个JSX文件

// main.jsx
const React = require('react');
const ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.querySelector('#wrapper')
);
复制代码

index.html

<html>
  <body>
    <div id="wrapper"></div>
    <script src="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']
          }
        }
      }
    ]
  }
};
复制代码

在上面的代码里需要babel-loader的两个插件babel-preset-es2015和babel-preset-react来转换ES6和React(翻译：现在为废弃了，详情)

Demo04:CSS-loader

Webpack允许在JS文件中包含CSS，需要CSS-loader对这些CSS进行处理
main.js

require('./app.css');
复制代码

app.css

body {
  background-color: blue;
}
复制代码

index.html

<html>
  <head>
    <script type="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-loader用来读取CSS文件来转换，另一个Style-loader用来往HTML中插入<style>标签。
然后打开server

$ cd demo04
$ npm run dev
复制代码

事实上，Webpack将CSS文件的内容直接插入到index.html

<head>
  <script type="text/javascript" src="bundle.js"></script>
  <style type="text/css">
    body {
      background-color: blue;
    }
  </style>
</head>
复制代码

Demo5: Image loader

Webpack能够将图片包含进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>
    <script type="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-loader将image文件转为<img>标签，如果图片大小小鱼8192字节，它将转换为Data url（翻译：图片变为Base64编码，减少请求次数），否则，他将转为普通文件URL。

<img src="data:image/png;base64,iVBOR...uQmCC">
<img src="4853ca667a2b8b8844eb2693ac1b2578.png">
复制代码

Demo06:CSS Module

css-loader?modules（请求参数为modules）能够使用CSS Module，CSS Module带给你的JS文件模块中的CSS一个局部作用域，也可以使用:global(selector)让CSS变为全局作用。
index.html

<html>
<body>
  <h1 class="h1">Hello World</h1>
  <h2 class="h2">Hello Webpack</h2>
  <div id="example"></div>
  <script src="./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
             }
          }
        ]
      }
    ]
  }
};
复制代码

访问 http://127.0.0.1:8080会看到只有h1是红色的，因为他的CSS是局部作用域，然后所以h2都是蓝色的，因为它是全局作用域。

Demo07:UglifyJs Plugin

Webpack用插件系统来扩展他的功能。例如，UglifyJs Plugin，它用来压缩JS代码，使得JS文件体积变小。
main.js

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

index.html

<html>
<body>
  <script src="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: [
    new UglifyJsPlugin()
  ]
};
复制代码

在访问服务器后，可以看到main.js最小化为如下代码：

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

（翻译：是在bundle.js的最后几个代码那，是这些代码）

Demo08:HTML Webpack Plugin和Open Browser Webpack Plugin

这个demo用来展示如何加载第三方插件
html-webpack-plugin能为你创建index.html，open-browser-webpack-plugin能够在Webpack加载时打开一个新的浏览器标签(tab)
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: [
    new HtmlwebpackPlugin({
      title: 'Webpack-demos',
      filename: 'index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ]
};
复制代码

现在你不用手动创建index.html也不用手动打开浏览器了。

Demo09:环境变量(Environment flags)

使用环境变量让一些代码只能在开发环境时使用。
main.js

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

if (__DEV__) {
  document.write(new Date());
}
复制代码

index.html

<html>
<body>
  <script src="bundle.js"></script>
</body>
</html>
复制代码

webpack.config.js

var webpack = require('webpack');

var devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [devFlagPlugin]
};
复制代码

现在传递环境变量给Webpack。打开demo09/package.json，找到如下scripts选项

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

Demo10:代码分离

在大型web应用中，将所有代码放入一个文件是十分低效的。Webpack允许你将大型JS文件分成多块。特别的，如果一些代码块只是在某些情况下需要，那么这些代码块会按需加载。
Webpack使用require.ensure来定义一个分割点

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

require.ensure告诉Webpack ./a,js需要从bundle.js中分离出来作为一个单独的块文件

// a.js
module.exports = 'Hello World';
复制代码

现在Webpack关心依赖、输出文件、运行时的东西。你不必将多余的东西放到index.html和webpack.config.js中
index.html

<html>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>
复制代码


webpack.config.js

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

访问服务器后，你感觉不到任何不同。实际上，Webpack将构建main.js和a.js到不同的块中（bundle.js和0.bundle.js），然后从bundle.js中按需加载0.bundle.js

Demo11:bundle-loader下的代码分离

另一个代码分割的方式是bundle-loader

// 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();
});
复制代码

require('bundle-loader!./a.js')告诉Webpack从其他块加载a.js
现在main.js构建为bundle.js，a.js构建为0.bundle.js

Demo12:通用块

在多个JS脚本中有通用块，通过CommonsChunkPlugin你能提取不同文件中的通用部分，对于浏览器缓存来节省带宽是非常有用的。

// 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')
);
复制代码

index.html

<html>
  <body>
    <div id="a"></div>
    <div id="b"></div>
    <script src="commons.js"></script>
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
  </body>
</html>
复制代码

上面的commons.js是main1.jsx和main2.jsx的通用部分。正如你想的，commons.js包括react和react-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: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "commons",
      // (the commons chunk name)

      filename: "commons.js",
      // (the filename of the commons chunk)
    })
  ]
}
复制代码

Demo13:Vendor chunk

通过CommonsChunkPlugin,你能从JS脚本提取官方库到单独的文件中
main.js

var $ = require('jquery');
$('h1').text('Hello World');
复制代码

index.html

<html>
  <body>
    <h1></h1>
    <script src="vendor.js"></script>
    <script src="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: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.js'
    })
  ]
};
复制代码

在上面的代码中，entry.vendor:['jquery']告诉Webpack，jquery应该被包括到通用块vendor.js中。
如果你想要一个模块作为全局变量来在不同的模块中使用，比如不用在每个文件中require('jquery')，而是让$或者jQuery作为全局变量，需要使用ProvidePlugin，它能够自动加载模块而不需要到处import或者是require

// main.js
$('h1').text('Hello World');


// webpack.config.js
var webpack = require('webpack');

module.exports = {
  entry: {
    app: './main.js'
  },
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};
复制代码

当然，在Demo13中，你需要自己全局加载jquery.js

Demo14:公开全局变量

如果你想用一些全局变量，不需要在Webpack包中包含他们，你可以使用webpack.config.js里的externals字段
例如，我们有一个data.js

// data.js
var data = 'Hello World';
复制代码

index.html

<html>
  <body>
    <script src="data.js"></script>
    <script src="bundle.js"></script>
  </body>
</html>
复制代码

注意，Webpack只会构建bundle.js, 而不会构建data.js
我们可以把data作为全局变量

// 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']
          }
        }
      },
    ]
  },
  externals: {
    // require('data') is external and available
    //  on the global var data
    'data': 'data'
  }
};
复制代码

此时，你可以require('data')作为模块变量，实际上它是一个全局变量

// main.jsx
var data = require('data');
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>{data}</h1>,
  document.body
);
复制代码

同样可以将react和react-dom放入externals，这样显著的降低构建bundle.js的时间和文件大小

Demo15:React router

这个Demo使用Webpack来构建React router的官方样例
先想象一个有控制板、收件箱、日历的小应用

+---------------------------------------------------------+
| +---------+ +-------+ +--------+                        |
| |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

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

import './app.css';

class App extends React.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>
    );
  }
};

class Dashboard extends React.Component {
  render() {
    return (
      <div>
        <p>Dashboard</p>
      </div>
    );
  }
};

class Inbox extends React.Component {
  render() {
    return (
      <div>
        <p>Inbox</p>
      </div>
    );
  }
};

class Calendar extends React.Component {
  render() {
    return (
      <div>
        <p>Calendar</p>
      </div>
    );
  }
};

render((
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>
), document.querySelector('#app'));
复制代码

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</htmL>

复制代码

然后访问http://127.0.0.1:8080

weixin_34009794
关注
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2343
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
学习计算机编程（IT、偏网站开发）的参考学习网址syk
chouzhan0246的博客
06-01 9829
这两年自己学到了许多东西，发现以前想学，可却不知道在哪里学，没有好的学习资源，这里我把这一年自己学习过程中了解到的好的计算机相关知识的学习网址分享给大家，虽然不是很全面，但希望能帮到那些想找学习资源的博友们。 IT学习资料（初晓） 1. 综合学习网址 （1）教学网站 http://...
阮一峰 Webpack 教程
热门推荐
userkang的博客
10-29 3万+
写在开头： 此 Webpack 教程是阮老师在 Webpack 1.x 的版本上做的。现在 Webpack 的版本已经改动较大，建议有基础的同学，就直接上官网看最新的就好了。这个教程可以用来了解下 Webpack 的前世今生。 开始 这个项目是一些简单的 Webpack 示例集合 这些示例特意用简单明了的方式编写，你将会发现跟着这些例子学习这个强大的工具并非难事。 如何使用 首先，全局安装 Web...
阮一峰《TypeScript 教程》学习笔记二函数
最新发布
weixin_45855469的博客
09-11 1217
这篇文章讲述Typescript中函数的写法，包括函数的类型、几种参数、函数重载、构造函数等。
阮一峰的webpack教程
simple5960的博客
01-03 3538
阮一峰的webpack教程
阮一峰教程webpack demo
GarfieldEr007的专栏
11-18 2347
This repo is a collection of simple demos of Webpack. These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful tool. How to ...
阮一峰之webpack-demos(译）
weixin_34023982的博客
11-15 224
最近因开始学ReactJS,发现ReactJS跟webpack这个模块化打包工具绝配，又开始找webpack的资料学。。。。。。在本尊千辛万苦的看了众多资料下，还是感觉阮大神写的这个demo简单明了，深入浅出，很适合新手学习，但是因为资料是全英文写的，自己在学习的过程中就顺当翻译了下，以下为原文地址链接 ： https://github.com/ruanyf/webpack-demos#demo...
初识 Webpack (七) 其他配置(制定css、js添加域名，解析html中的image，跨域、devtool定位css和js异常位置、clean插件、图标等)
Sicily_winner的博客
01-27 1233
目录 ◆打包图片处理 3个文件基础直接跳转至此操作： 3个文件操作结束 ◆ 打包css和image分别指定文件夹（） ◆ 访问图片时加上域名 ◆ 代理服务器 ◆ webpack其他属性（跨域） ◆ devtool配置（定位异常） 文章 前言 内容 ✔生产环境 js定位异常位置 ✔ 生产环境 css 定位异常位置 ◆ clean-webpack-plugin（...
MongoDB+Socket.io+async+JWT+Express+Webpack+ES6+Sass+React
Rain120
01-09 1437
最近在github上学习一个前端项目 机票 KieSun/Chat-Buy-React 主要是利用 React / Node 实现的应用，代码虽然不难，但涉及的东西很多，所以我把我最近学到的东西，作为笔记写在这里，供我以后使用，或者大家参考，有什么问题还请大佬指点 主要是利用 React / Node 实现的应用，代码虽然不难，但涉及的东西很多，所以我把我最近学到的东西，作为笔记
前端网站资源精编！！
qianduan666a的博客
07-16 9291
前端网站资源精编！！ 目录: 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- Angularjs 5-------- ES6 6-------- React 7-------- 移动端API 8-------- avalon 9-------- Requriejs 10-------- vue 11-------- Seajs 12-------- Less,sass 13-------- Markdown 14-------- D3
webpack——阮一峰webpackDemo分析
weixin_30402343的博客
02-14 1238
首先上交阮一峰老师的github地址，一共有15个demo，我们一个一个的进行分析，结合上文所学的知识！ 其中有一些内容,我做了修改,我是先看一遍然后从新敲了一遍。 https://github.com/ruanyf/webpack-demos 准备工作 首先还是安装，不过这一次，我们进行全局安装。 $ npm i -g webpack webpack-dev-...
（翻译）阮一峰老师的webpack使用教程
weixin_34234823的博客
01-18 1614
文章说明 这篇文章是在看阮一峰老师在GitHub上发表的webpack学习文档的时候，翻译出的文档说明webpack 阮一峰教程 ,纯手打非机翻。 最后两个demo没有打上来，翻译好会补上来。文中有一小部分文字是我针对这个知识点的理解，就几行。 如果有错误，欢迎指出。 再次感谢阮一峰老师。 什么是webpack 前端构建工具，与gulp和grunt 类似 作为打包工具，与browserify 类似...
webpack使用教程 翻译自阮一峰(机翻)
GarfieldEr007的专栏
11-18 1053
原文https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 这个仓库集合了一些webpack简单的demo。 这些demo风格简单明了，你将发现跟着这些案例学习webacpk这个强大的工具变得不费吹灰之力。 如何使用 首先，在全局环境中安装Webpack和webpack-dev-server $ npm i -g w...
linux 网络配置 阮一峰,webpack使用教程 翻译自阮一峰(机翻)
weixin_42517406的博客
05-10 416
原文https://github.com/ruanyf/webpack-demos#demo01-entry-file-source这个仓库集合了一些webpack简单的demo。这些demo风格简单明了，你将发现跟着这些案例学习webacpk这个强大的工具变得不费吹灰之力。如何使用$ npm i -g webpack webpack-dev-server然后将仓库克隆到本地并安装相关依赖# Li...
webpack学习笔记（阮一峰教程demo）
飞翔的熊blabla
04-15 711
学习webpack，直接观看代码理解。将自己的理解过程记录下来，后续若有不同理解，再来修改。 献上阮一峰老师的webpack教程地址：webpack 将整个demo完整的clone下来，用vscode导入整个文件夹之后，发现也只有15个demo而已，小case，so easy，开撸。 Demo01: Entry file 组织架构如图， demo01 bundle.js为自动生成...
webpack打包原理阮一峰(webpack打包原理优化)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-30 1025
阮俊峰这个多少分，这个名字好吗? 含义风云蔽月象才智谋略虽业博名利实力其刚频意外灾患内外败涂困难苦惨绝若主运数乏其吉数助陷病弱、废疾、孤寡甚至夭折妻死别、刑罚、杀伤等灾万事挫折非命至极故叫短命数若先金水者 孤峰原理是怎样的？孤峰原理指的是什么？ 在市场上，消费者所感受到的是由“孤峰”营造的企 业特色，即使其...
Webpack入门教程
徐同保的专栏
09-07 996
Webpack入门教程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值