Webpack 入门

Webpack 入门

**Tip:** 本文所有示例基于 webpack2。 文中的示例代码说明可以参考:Webpack 示例代码说明

安装

本地安装

$ npm install --save-dev webpack
$ npm install --save-dev webpack@<version>

如果你在项目中使用了 npmnpm 首先会在本地模块中寻找 webpack。这是一个实用的小技巧。

"scripts": {
    "start": "webpack --config mywebpack.config.js"
}

上面是 npm 的标准配置,也是我们推荐的实践。

 当你在本地安装 webpack 后,你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

全局安装

$ npm install --global webpack

webpack 命令现在可以全局执行了。

创建一个 bundle 文件

创建一个 app/index.js 文件。

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

创建一个 index.html 文件。

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

执行命令

$ webpack ./app/index.js ./dist/bundle.js

这条命令的第一个参数为输入文件,第二个参数为输出文件。

会在目录下生成一个 dist/bundle.js 文件,它已打包所需的所有代码的输出文件。

在浏览器中打开 index.html 文件。

完整示例: (DEMO00)

webpack.config.js

webpack.config.jswebpack 默认的配置文件,当执行 webpack 命令时,webpack 会在当前目录下自动搜索 webpack.config.js 文件。

单入口(Entry)

基于 (DEMO00) 的代码,新建一个 webpack.config.js 文件,内容如下:

const path = require('path');

module.exports = {

  // 这里应用程序开始执行
  // webpack 开始打包
  entry: "./app/index.js",

  // webpack 如何输出结果的相关选项
  output: {
    // 所有输出文件的目标路径
    // 必须是绝对路径(使用 Node.js 的 path 模块)
    path: path.resolve(__dirname, "dist"),

    // 「入口分块(entry chunk)」的文件名模板(出口分块?)
    filename: "bundle.js",
  }
};

执行命令

$ webpack

在浏览器中打开 index.html 文件。

完整示例: (DEMO01)

多入口(Entry)

如果有多个入口文件怎么办?很简单,我们来看一个示例:

新建 app/about.js 文件

document.write('<h2>ABOUT</h2>');

新建 app/home.js 文件

document.write('<h1>HOME</h1>');

新建 index.html 文件

<html>
<body>
<script src="dist/home.js"></script>
<script src="dist/about.js"></script>
</body>
</html>

新建 webpack.config.js 文件

const path = require('path');

module.exports = {

  // 这里应用程序开始执行
  // webpack 开始打包
  // 本例中 entry 为多入口
  entry: {
    home: './app/home.js',
    about: './app/about.js'
  },

  // webpack 如何输出结果的相关选项
  output: {
    // 所有输出文件的目标路径
    // 必须是绝对路径(使用 Node.js 的 path 模块)
    path: path.resolve(__dirname, "dist"),

    // 「入口分块(entry chunk)」的文件名模板(出口分块?)
    // filename: "bundle.js", // 用于多个入口点(entry point)(出口点?)
    filename: "[name].js", // 用于多个入口点(entry point)(出口点?)
    // filename: "[chunkhash].js", // 用于长效缓存
    // filename: "[name].[chunkhash].js", // 用于长效缓存
  }
};

执行命令

$ webpack

在浏览器中打开 index.html 文件。

完整示例: (DEMO02)

Webpack 系列教程

欢迎阅读其它内容:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫实战

Python爬虫:爬取在线教程转成pdf

1、网站介绍2、准备工作2.1 软件安装2.2 库安装3、爬取内容3.1 获取教程名称3.2 获取目录及对应网址3.3 获取章节内容3.4 保存pdf3.5 合...

19410
来自专栏Android干货

Android Studio 之 注释模板

52870
来自专栏逢魔安全实验室

RPO攻击技术浅析

? ? 01 — 什么是RPO攻击? RPO(Relative Path Overwrite)相对路径覆盖,是一种新型攻击技术,最早由GarethHeyes在...

46650
来自专栏Android干货

网页一键加入QQ群

74850
来自专栏Jerry的SAP技术分享

将Java应用部署到SAP云平台neo环境的两种方式

Eclipse里选择要部署的项目,右键->Run as Server, 选择上一步创建的Server即完成部署。

22720
来自专栏zaking's

走近webpack(4)--css相关拓展

  我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要...

426100
来自专栏Timhbw博客

腾讯云COS开启FTP功能

2016-06-0715:35:35 发表评论 258℃热度 我的网站一直用的是腾讯云的COS,图片、JS、CSS等静态资源都存在上面,速度比较理想。但有一个...

1.2K140
来自专栏向治洪

搭建网站

环境 Windows 10(64 位) Git-2.7.4-64-bit node-v4.4.7-x64 如果上述软件已经安装的,跳过,没有安装的下载安装。 1...

74760
来自专栏每日一篇技术文章

带你入坑01-weex-搭建环境

安装 Node.js 环境成功后,npm 包管理工具也会自动安装成功 输入下面命令检查一下

11410
来自专栏散尽浮华

Gitlab可视化代码树插件-Octotree

Octotree 是国外程序员Buu Nguyen 做的一个 Chrome 插件。安装之后可以可视化在线浏览托管在Github或Gitlab上( 2.0.1版本...

1.7K80

扫码关注云+社区

领取腾讯云代金券