webpack的安装

时间 2019-11-21

标签 webpack 安装繁體版

原文原文链接

1、webpack是什么？

webpack是一款模块加载器兼打包工具，它能把各类资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都做为模块来使用和处理。 webpack 的核心是依赖分析,把依赖分析出来了，其余都是细枝末节了

2、安装webpack

①前提，你的电脑须要安装node和npm,若是没的话先去官方下载!!!

我是全局安装的： npm install webpack -g 我的以为最好在你的项目中也包含一份独立的 Webpack，这样你更方便管理你的项目 npm install --save-dev webpack 若是安装成功会显示以下图

②一般咱们会将 Webpack 安装到项目的依赖中，这样就可使用项目本地版本的 Webpack。

安装webpack依赖包

安装依赖包成功会显示下图红色线条是路径

$ npm install webpack --save-dev

Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能而且和稳定版不兼容，在正式项目中应该使用稳定版。

检查webpack版本

$ npm info webpack

若是须要使用 Webpack 开发工具，要单独安装：

$ npm install webpack-dev-server --save-dev

2、使用webpack

①首先建立一个静态页面 index.html 和一个 JS 入口文件 entry.js：

!-- index.html -->
<html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html>

// entry.js document.write('It works.')

②而后编译 entry.js 并打包到 bundle.js：

$ webpack entry.js bundle.js

③打包过程会显示日志：

Hash: e964f90ec65eb2c29bb9 Version: webpack 1.12.2 Time: 54ms Asset Size Chunks Chunk Names bundle.js 1.42 kB 0 [emitted] main [0] ./entry.js 27 bytes {0} [built]

④用浏览器打开 index.html 将会看到 It works. 接下来添加一个模块 module.js 并修改入口 entry.js：

// module.js module.exports = 'It works from module.js.'

// entry.js document.write('It works.') document.write(require('./module.js')) // 添加模块

⑤从新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.

Hash: 279c7601d5d08396e751 Version: webpack 1.12.2 Time: 63ms Asset Size Chunks Chunk Names bundle.js 1.57 kB 0 [emitted] main [0] ./entry.js 66 bytes {0} [built] [1] ./module.js 43 bytes {0} [built]

⑥Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每一个模块分配一个惟一的 id 并经过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

安装webpack的教程https://v.qq.com/x/page/m0380s6tk4s.htmljavascript

1. webpack -- webpack安装
2. webpack的安装
3. webpack-安装webpack、webpack-dev-server与webpack-cli
4. Webpack教程（2）： Webpack安装
5. 安装 webpack
6. Webpack 安装
7. Webpack安装
8. 安装webpack
9. webpack安装
10. webpack ( 一 ) 安装
更多相关文章...
• Docker 安装 Nginx - Docker教程
• Docker 安装 Node.js - Docker教程
• Composer 安装与使用
• IntelliJ IDEA安装代码格式化插件

webpack的安装

1、webpack是什么？

webpack是一款模块加载器兼打包工具，它能把各类资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都做为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了，其余都是细枝末节了

2、安装webpack

①前提，你的电脑须要安装node和npm,若是没的话先去官方下载!!!

我是全局安装的： npm install webpack -g 我的以为最好在你的项目中也包含一份独立的 Webpack，这样你更方便管理你的项目 npm install --save-dev webpack 若是安装成功 会显示以下图

②一般咱们会将 Webpack 安装到项目的依赖中，这样就可使用项目本地版本的 Webpack。

安装webpack依赖包

安装依赖包成功 会显示下图 红色线条是路径

$ npm install webpack --save-dev

Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能而且和稳定版不兼容，在正式项目中应该使用稳定版。

检查webpack版本

$ npm info webpack

若是须要使用 Webpack 开发工具，要单独安装：

$ npm install webpack-dev-server --save-dev

2、使用webpack

①首先建立一个静态页面 index.html 和一个 JS 入口文件 entry.js：

②而后编译 entry.js 并打包到 bundle.js：

③打包过程会显示日志：

④用浏览器打开 index.html 将会看到 It works. 接下来添加一个模块 module.js 并修改入口 entry.js：

⑤从新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.

webpack是一款模块加载器兼打包工具，它能把各类资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都做为模块来使用和处理。 webpack 的核心是依赖分析,把依赖分析出来了，其余都是细枝末节了

我是全局安装的： npm install webpack -g 我的以为最好在你的项目中也包含一份独立的 Webpack，这样你更方便管理你的项目 npm install --save-dev webpack 若是安装成功会显示以下图

安装依赖包成功会显示下图红色线条是路径