阮一峰 Webpack 教程

最新推荐文章于 2024-07-23 16:39:39 发布
最新推荐文章于 2024-07-23 16:39:39 发布
阅读量3.7w 收藏 116
点赞数 14
分类专栏： webpack 文章标签： webpack 阮一峰

写在开头：

此 Webpack 教程是阮老师在 Webpack 1.x 的版本上做的。现在 Webpack 的版本已经改动较大，建议有基础的同学，就直接上官网看最新的就好了。这个教程可以用来了解下 Webpack 的前世今生。

仓库地址： https://github.com/userkang/webpack-demos-cn

开始

这个项目是一些简单的 Webpack 示例集合

这些示例特意用简单明了的方式编写，你将会发现跟着这些例子学习这个强大的工具并非难事。

如何使用

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

$ npm i -g webpack webpack-dev-server

然后，克隆这个仓库

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

安装依赖

$ cd webpack-demos
$ npm install

现在，去项目 demo* 目录下开始源码体验之旅吧

$ cd demo01
$ npm run dev

如果上面的命令没有自动打开浏览器，你可能需要自己在浏览器访问
http://127.0.0.1:8080

前言：什么是 Webpack

Webpack 是为浏览器构建 JavaScirpt 模块脚本的前端工具

它可以像 Browserify 一样使用，并且更加强大

$ browserify main.js > bundle.js
# 相当于
$ webpack main.js bundle.js

Webpack 需要一个 webpack.config.js 的配置文件，它只是一个 CommonJs 模块

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

有了这个文件之后，你可以不带参数的调用 Webpack

$ webpack

你需要了解一些命令行选项

  • webpack – 开发环境构建
  • webpack -p – 生产环境构建(压缩混淆脚本)
  • webpack --watch – 监听变动并自动打包
  • webpack -d – 生成 map 映射文件
  • webpack --colors – 构建过程带颜色输出

你可能需要像下面这样在 package.json 中自定义一些脚本 scripts

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

目录

  1. Entry file
  2. Multiple entry files
  3. Babel-loader
  4. CSS-loader
  5. Image loader
  6. CSS Module
  7. UglifyJs Plugin
  8. HTML Webpack Plugin and Open Browser Webpack Plugin
  9. Environment flags
  10. Code splitting
  11. Code splitting with bundle-loader
  12. Common chunk
  13. Vendor chunk
  14. Exposing Global Variables
  15. React router

Demo01: Entry file (source)

入口文件是 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: Multiple entry files (source)

多个入口文件也是可以的。在多页面 应用中，每个页面拥有不同的入口文件，用这个就非常管用了。

// 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 (source)

Loaders 是一种预处理器，它可以在 Webpack 编译之前把你应用中的静态资源进行转换 (更多信息)。

举个例子， Babel-loader 可以在 Webpack 编译这些 JS 文件之前，先将 JSX/ES6 语法的文件转换成普通 ES5 语法的文件。Webpack 官网可以查看目前支持的 loaders。

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 的预设插件 babel-preset-es2015 and babel-preset-react 来转义 ES6 和 React。

Demo04: CSS-loader (source)

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']
      }
    ]
  }
}

注意，你必须用到两个 loaders 去转换 CSS 文件。一个是 CSS-loader 来读取 CSS 文件，另一个是 Style-loader 用来把 <style> 标签插入 HTML 页面。

接下来，让我们启动服务。

$ cd demo04
$ npm run dev

事实上，Webpack 会将一个内联样式表插入到 index.html。

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

Demo05: Image loader (source)

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
将图片文件转成 img 标签。如果图片的大小小于 8192 字节，将会被转成 base64 的格式，否则还事会转成一条普通的链接。

启动服务就可以看到，small.png 和 big.png 这两张图片转成了不同的两种格式。

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

Demo06: CSS Module (source)

css-loader?modules 的 CSS Module 功能可以给 JS 模块的 CSS 设置一个局部作用域。你可以用 :global(selector) (更多) 关掉它，使样式变成全局的。

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',
            // 开启 CSS Module 功能
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
}

启动服务。

$ cd demo06
$ npm run dev

访问 http://127.0.0.1:8080, 你将看到 h1 是红色的，因为它的样式是局部作用域，h2 是蓝色的，因为它的作用域是全局的。

Demo07: UglifyJs Plugin (source)

Webpack 用一套插件系统扩展了它的功能。比如，UglifyJs Plugin 就是其中的一个流行的插件，它可以压缩混淆输出的 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>')

Demo08: HTML Webpack Plugin and Open Browser Webpack Plugin (source)

This demo shows you how to load 3rd-party plugins.

这个例子将讲讲怎么载入第三方的插件。

html-webpack-plugin 将会
为你创建一个 index.html 文件。 open-browser-webpack-plugin 可以在 Webpack 编译完成后打开一个新窗口。

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'
    })
  ]
}

启动服务。

$ cd demo08
$ npm run dev

现在你不仅不需要手动的写 index.html 文件，而且也不用手动的打开浏览器了。Webpack 都帮你完成了。

Demo09: Environment flags (source)

你可以用环境变量来区分开发环境。

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')

// DefinePlugin 允许创建一个在编译时可以配置的全局常量
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]
}

现在打开 demo09/package.json，你需要在 scripts 字段下添加如下的代码，向 webpack 传递环境变量。

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

启动服务。

$ cd demo09
$ npm run dev

Demo10: Code splitting (source)

对于一个大型 app，把所有代码塞到一个文件可能不是很好维护。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 上了。

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

webpack.config.js

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

启动服务。

$ cd demo10
$ npm run dev

表面上，你不会感到什么变化。然而，Webpack 已经把 main.js 和 a.js 构建成两个不同的文件（bundle.js and 0.bundle.js），并且按依赖关系依次引入。

Demo11: Code splitting with bundle-loader (source)

另一种进行代码分离的方法是用 bundle-loader。

// main.js

// 现在 a.js 被引入，它将会被打包到另一个文件
var load = require('bundle-loader!./a.js')

// 为了等待 a.js 中的模块变得可用
// 你可能需要使用 async wait
load(function(file) {
  document.open()
  document.write('<h1>' + file + '</h1>')
  document.close()
})

require('bundle-loader!./a.js') 告诉 Webpack 从另一个包里加载 a.js。

现在 Webpack 将会构建 main.js 到 bundle.js 中, a.js 到 0.bundle.js 中。

Demo12: Common chunk (source)

当多个 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 的公共部分。也就是包含了 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 (source)

你也可以用 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 jeuery 应该被打包到一个公共 vendor.js 包中去。

如果你想让一个全局的变量在每一个模块可用，比如 $ 和 jQuery 不用 require("jquery") 就可以直接用。那么你需要使用 ProvidePlugin (Official doc) 这个插件，它可以自动的载入模块，而不需要到处 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'
    })
  ]
}

当然，这种情况，你还需要手动的全局的载入 jquery.js

Demo14: Exposing global variables (source)

如果你想要用到一些全局变量，但是又不想在打包的时候，把它打包到 bundle 文件中去。这个时候你可以在 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'
  }
}

现在，你可以在脚本中像引入其他模块一样引入 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 (source)

这个演示用 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>

启动服务。

$ cd demo15
$ npm run dev

相关链接

证书

MIT

userkang
关注
  • 14
    点赞
  • 踩
  • 116
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
webpack教程
m0_72967249的博客
11-23 285
webpage
webpack快速入门---webpack的安装和基本使用
I_am_shy的博客
05-29 1906
/ 引用nodejs的path模块mode: 'development',//开发环境entry : path.join(__dirname,'src','index.js'),// 打包入口output:{path:path.join(__dirname,'dist'),// 打包结束的位置filename :'bundle.js' // 指定的打包后文件名称},module:{//配置模板rules:[//规则设置test: /\.js$/,//只对js文件生效。
webpack的基本介绍与使用
最新发布
qq_45799465的博客
07-23 1262
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
阮一峰的webpack教程
simple5960的博客
01-03 3524
阮一峰的webpack教程
[翻译]阮一峰webpack教程（Demo集合）
weixin_34009794的博客
07-09 978
翻译它主要是用于学习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...
linux 网络配置 阮一峰,webpack使用教程 翻译自阮一峰(机翻)
weixin_42517406的博客
05-10 389
原文https://github.com/ruanyf/webpack-demos#demo01-entry-file-source这个仓库集合了一些webpack简单的demo。这些demo风格简单明了，你将发现跟着这些案例学习webacpk这个强大的工具变得不费吹灰之力。如何使用$ npm i -g webpack webpack-dev-server然后将仓库克隆到本地并安装相关依赖# Li...
阮一峰教程webpack demo
GarfieldEr007的专栏
11-18 2327
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的学习案例
08-25
Webpack 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色，通过将各种资源（如JavaScript、CSS、图片等）打包成优化过的单一文件或多个文件，极大地提高了项目的加载速度和开发效率...
webpack-adminlte
05-16
webpack-adminlte项目转自安装依赖、loader、plugins(只列部分解析，更多请看package.json)vuex : 用于 vue 组件间的... 详细说明参考阮一峰的 Babel 入门教程clean-webpack-plugin : 用来清空发布目录html-webpack-
nodejs教程之入门
10-25
Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行环境，它...最后，了解打包流程，如 Webpack 或 Rollup，可以帮助你优化项目结构和提高应用性能。通过这样的学习计划，你将逐步成为一名熟练的 Node.js 开发者。
react-redux-links：我在React，Redux，ES6等上收集的精选教程和资源链接
02-03
3. ES6入门教程：http://es6.ruanyifeng.com/，阮一峰老师的经典教程，深入浅出地介绍了ES6的新特性。 4. React与Redux实战课程：例如“React和Redux全栈开发”（可在各大在线教育平台找到），通过实际项目帮助理解...
（翻译）阮一峰老师的webpack使用教程
weixin_34234823的博客
01-18 1575
文章说明 这篇文章是在看阮一峰老师在GitHub上发表的webpack学习文档的时候，翻译出的文档说明webpack 阮一峰教程 ,纯手打非机翻。 最后两个demo没有打上来，翻译好会补上来。文中有一小部分文字是我针对这个知识点的理解，就几行。 如果有错误，欢迎指出。 再次感谢阮一峰老师。 什么是webpack 前端构建工具，与gulp和grunt 类似 作为打包工具，与browserify 类似...
webpack——阮一峰webpackDemo分析
weixin_30402343的博客
02-14 1229
首先上交阮一峰老师的github地址，一共有15个demo，我们一个一个的进行分析，结合上文所学的知识！ 其中有一些内容,我做了修改,我是先看一遍然后从新敲了一遍。 https://github.com/ruanyf/webpack-demos 准备工作 首先还是安装，不过这一次，我们进行全局安装。 $ npm i -g webpack webpack-dev-...
webpack打包原理阮一峰(webpack打包原理优化)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-30 995
阮俊峰这个多少分，这个名字好吗? 含义风云蔽月象才智谋略虽业博名利实力其刚频意外灾患内外败涂困难苦惨绝若主运数乏其吉数助陷病弱、废疾、孤寡甚至夭折妻死别、刑罚、杀伤等灾万事挫折非命至极故叫短命数若先金水者 孤峰原理是怎样的？孤峰原理指的是什么？ 在市场上，消费者所感受到的是由“孤峰”营造的企 业特色，即使其...
webpack学习笔记（阮一峰教程demo）
飞翔的熊blabla
04-15 676
学习webpack，直接观看代码理解。将自己的理解过程记录下来，后续若有不同理解，再来修改。 献上阮一峰老师的webpack教程地址：webpack 将整个demo完整的clone下来，用vscode导入整个文件夹之后，发现也只有15个demo而已，小case，so easy，开撸。 Demo01: Entry file 组织架构如图， demo01 bundle.js为自动生成...
webpack使用教程 翻译自阮一峰(机翻)
GarfieldEr007的专栏
11-18 1043
原文https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 这个仓库集合了一些webpack简单的demo。 这些demo风格简单明了，你将发现跟着这些案例学习webacpk这个强大的工具变得不费吹灰之力。 如何使用 首先，在全局环境中安装Webpack和webpack-dev-server $ npm i -g w...
Webpack教程
weixin_48333948的博客
11-18 166
什么是Webpack Webpack是一个模块打包器，它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用。 ----Webpack中文文档 使用步骤 安装 npm install --save-dev webpack npm install --save-dev webpack-cli 这两行命令会为你的项目安装webpack和webpack-cli包，前者是webpack的核心库，后者是分离出来的webpack命令行功能，我们需要使用webpack-cli来进行项目
webpack 教程
07-28
webpack教程是一篇关于使用webpack进行前端项目构建的文章。它包含了webpack的安装、配置、加载器和插件的使用等内容。在教程中，作者介绍了webpack与其他构建工具（如grunt和gulp）的区别，并详细说明了webpack的概念和基本用法。教程还提供了一些示例代码和实践步骤，帮助读者更好地理解和应用webpack。其中，引用\[1\]提供了关于webpack的基本命令和配置的使用方法，引用\[2\]介绍了webpack的入口、出口、加载器和插件的概念，引用\[3\]则介绍了如何使用插件来提取和加载CSS文件。如果你对webpack感兴趣，这篇教程会给你提供一些有用的指导和实践经验。 #### 引用[.reference_title] - *1* [webpack详细教程](https://blog.csdn.net/weixin_41842236/article/details/103132674)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [webpack基础教程](https://blog.csdn.net/k0101jcj/article/details/106825691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值