webpack环境搭建使用

1、安装：

首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。

用 npm 安装 Webpack：$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。

通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

# 进入项目目录

# 确定已经有 package.json，没有就通过 npm init 创建

# 安装 webpack 依赖

$ npm install webpack —save-dev

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

# 查看 webpack 版本信息

$ npm info webpack

# 安装指定版本的 webpack

$ npm install webpack@1.12.x --save-dev

如果需要使用 Webpack 开发工具，要单独安装：

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

2、使用webpack

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

<html>

<head>

</head>

<body>

</body>

</html>

// require.js里边随意编辑点内容

document.write('这是我的第一个webpack例子.’)

然后编译 require.js 并打包到 bundle.js：//bundle.js是大包编译新生成的一个js

$ webpack require.js bundle.js

打包过程会显示日志：

Hash: e964f90ec65eb2c29bb9

Version: webpack 2.3.2

Time: 54ms

Asset Size Chunks Chunk Names

bundle.js 1.42 kB 0 [emitted] main

[0] ./require.js 27 bytes {0} [built]

用浏览器打开 index.html 将会看到这是我的第一个webpack例子. 。

接下来添加一个模块 module.js 并修改入口 require.js：

// module.js

module.exports = '这个是来自 module.js.'

// require.js

document.write('这是我的第一个webpack例子.’)

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

重新打包 webpack require.js bundle.js 后刷新页面看到变化 ‘这是我的第一个webpack例子.这个是来自 module.js.’

Hash: 279c7601d5d08396e751

Version: webpack 2.3.2

Time: 63ms

Asset Size Chunks Chunk Names

bundle.js 1.57 kB 0 [emitted] main

[0] ./require.js 66 bytes {0} [built]

[1] ./module.js 43 bytes {0} [built]

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

//自动编译监听

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

$ webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

$ webpack --progress --colors —watch //修改保存后自动编译

当然，使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

# 安装

$ npm install webpack-dev-server -g

# 运行

$ webpack-dev-server --progress --colors

转载于:https://www.cnblogs.com/jhwjanice/p/6646943.html

webpack环境搭建使用相关推荐

React系列---Webpack环境搭建（二）不同环境不同配置
React系列---Webpack环境搭建(一)手动搭建 React系列---Webpack环境搭建(二)不同环境不同配置 React系列---Webpack环境搭建(三)打包性能优化实际项目中,往 ...
初识webpack与webpack环境搭建
文章目录认识webpack配置文件 webpack配置结构环境搭建安装Node.js和NPM NVM安装 Nodejs和NPM安装环境搭建安装webpack和webpack-cli 创建空目录和 ...
手把手从底层搭建react应用（如何自己实现react脚手架）（webpack环境搭建）
先附上原文链接 https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658 React如果脱离我们所熟悉的环境 ...
vuejs+webpack环境搭建
使用vuejs来开发前端框架,首先要有环境,vuejs依赖于nodejs,所以要先安装nodejs,借助于node里面的npm来安装需要的依赖等等. nodejs的下载地址(http://nodejs ...
webpack 读取文件夹下的文件_TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建...
1.TypeScript完全解读-开发环境搭建初始化项目手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目然后我们的项目 ...
干货！快速上手typescript的学习笔记（对比JS的新特性，环境搭建，webpack配置，ts编译配置）
前提需要有js的基础文章目录 TypeScript 产生背景什么是TypeScript? TypeScript增加了什么 TypeScript开发环境搭建基本类型编译文件配置 tsconfig ...
从零搭建个人博客(3)-如何在webpack环境下配置jquery和富文本编辑器Simditor
无论是博主自己写文章还是读者发表评论,都需要一个方便的编辑框,html自带的textarea和editable div都过于简单,本文将记录在webpack环境中添加jquery和Simditor的过 ...
Spring Boot+Vue从零开始搭建系统（一）：项目前端_Vuejs环境搭建
前言博主本身是一直从事Java后端开发,一直想独立开发一套完整前端和后端技术结合的项目来提升自己的技术水平,经过对业界的一些热点技术的了解并对技术栈选型考虑后,博主打算利用Vue.js和Spring ...
linux以太坊开发环境搭建
2019独角兽企业重金招聘Python工程师标准>>> 如果你希望马上开始学习以太坊DApp开发,可以访问汇智网提供的出色的在线互动教程: 以太坊DApp实战入门教程以太坊去中心化 ...

webpack环境搭建使用

webpack环境搭建使用相关推荐

最新文章

热门文章