webpack入门（1）

最新推荐文章于 2025-08-15 09:01:53 发布

翻译最新推荐文章于 2025-08-15 09:01:53 发布 · 401 阅读

文章标签：

#javascript

webpack 专栏收录该内容

2 篇文章

订阅专栏

爱编程w2bc.com

什么是webpack?
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。

webpack安装
安装及demo
这里写图片描述

It can beused as a module bundler similar to Browserify, and do much more.

$ browserify main.js > bundle.js
# be equivalent to
$ webpack main.js bundle.js //和browserify等价

Webpack常用命令：
webpack 最基本的启动webpack命令
webpack -w 提供watch方法，实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供SourceMaps，方便调试
webpack –colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack –profile 输出性能数据，可以看到每一步的耗时
webpack –display-modules 默认情况下 node_modules 下的模块会被隐藏

全局安装webpack和webpack-dev-server:
npm install –g webpack webpack-dev-server

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。

直接敲命令：webpack-dev-server 打开本机浏览器输入 http://127.0.0.1:8080就可以看到你页面效果；

在webpack模块打包中最好先安装依赖，好多组件需要用，使用命令：npminstall;

module.exports = {
  entry: './main.js',//entry用来定义入口文件
  output: {//output用来定义构建后的文件的输出，有path和filename
    filename: 'bundle.js'
  }
};
//entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字

cd命令
f://找出路径

$ webpack   //这一个命令就在目录下生成一个bundle.js文件
$ webpack-dev-server
Launch theserver, visit http://127.0.0.1:8080 .

如何在本机运行克隆项目并创建依赖clone the repo and install the dependencies.

Linux & Mac

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

Windows

//Git

$ git clone https://github.com/ruanyf/webpack-demos.git
:
$ cd webpack-demos
$ npm install//可以省略

$ cd demo01
$ webpack-dev-server

Visit http://127.0.0.1:8080 with your browser.

//C:\Users\Administrator\Documents\GitHub\webpack-demos 我的默认项目位置
Git常用命令
 Git常用命令