webpack-test #2

boloog · 2017-06-21T05:33:15Z

介绍

webpack是一款模块加载器兼打包工具，它能把各种资源JS/CSS/图片等都作为模块来使用和处理。
webpack 是以 commonJS 的形式来书写脚本，对 AMD/CMD 的支持也很全面，方便其它模块也兼容使用
扩展性强，插件机制完善，能被模块化处理的资源多，例JS/CSS/IMG等
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

安装

webpack依赖于Node.js,所以安装webpack之前一定要先安装 Node.js
npm install webpack -g 全局安装webpack就可以在任何地方使用了
webpack -h 返回一些帮助的信息(说明已经安装成功)

使用

mkdir webpack-test
cd webpack-test/
npm init -y 生成 package.json
npm install webpack --save-dev 安装到当前项目开发依赖里面
用编辑器打开当前项目文件夹
新建一个 entry.js
代码：

document.getElementById('app').textContent = 'hello !';

新建一个初始化 html (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>webpack-test</title>
</head>
<body>
	<div id="app"></div>
	<script src="bundle.js"></script>
</body>
</html>

然后在命令行执行：

webpack entry.js  bundle.js  // webpack 入口文件  生成新文件

目录下就生成了 bundle.js
用浏览器打开 index.html ，页面输出 hello ! 说明打包完成

和其它模块一起打包

当前目录下创建一个 name.js
用模块倒出的方式输出

module.exports = 'boloog';

修改 entry.js 引入name框架

var name = require('./name');
document.getElementById('app').textContent = 'hello - ' + name;

然后在命令行执行：
webpack entry.js bundle.js
页面输出 hello - boloog 说明打包完成

安装loader (转换器)

当前 webpack 只能处理js文件，处理css文件需要安装 loader(css-loader style-loader)
npm install css-loader style-loader --save-dev 安装到当前项目到开发依赖

创建一个 style.css

body{
	background-color: red;
	color: #fff;
	font-size: 30px;
}

修改 entry.js 引入css

var name = require('./name');
require('style-loader!css-loader!./style.css');
document.getElementById('app').textContent = 'hello - ' + name;

然后在命令行执行：
webpack entry.js bundle.js
页面输出 hello - boloog 字体白色，背景红色，说明打包完成

webpack 配置文件实现命令打包

新建一个 webpack.config.js

module.exports = {
	entry: './entry.js',
	output: {
		path: __dirname,
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
		        	{ loader: "style-loader" },
		        	{ loader: "css-loader" }
		        ]
			}
		]
	}
}

调试代码 `source-map` 显示编辑之前的文件

然后在命令行执行：
webpack --devtool source-map
当前目录会生成一个 bundle.js.map
打开调试模式，重新刷新一下，Sources菜单生成 webpack:// 目录，此时可以看到代码编译之前的源码

bable babel-preset-es2015 处理 es2015 的js新写法

安装相关依赖
npm install babel-core babel-loader babel-preset-es2015 --save-dev
Babel的配置文件目录下新建 .babelrc 配置文件，该文件用来设置转码规则和插件，基本格式如下。

{
	"presets": ["es2015"]
}

修改 webpack.config.js 添加编译 es2015 的写法

module.exports = {
	entry: './entry.js',
	output: {
		path: __dirname,
		filename: 'bundle.js'
	},
	module: {
		rules: [
			{
		      	test: /\.js$/,
		      	exclude: /(node_modules)/, // 排除 不编译当前目录下的js
		      	use: {
		        	loader: 'babel-loader',
		      	}
		  	},
			{
				test: /\.css$/,
				use: [
		        	{ loader: "style-loader" },
		        	{ loader: "css-loader" }
		        ]
			}
		]
	}
}

修改 name.js 使用es6语法进行编写

let name = 'boloog'
export default name

修改 entry.js 使用es6语法进行编写

import name from './name'
import './style.css'
document.getElementById('app').textContent = 'hello - ' + name

然后在命令行执行：
webpack 打包完成

webpack-dev-server 模块热替换

它可以帮我们生成一个开发用的服务器，可以自动打包和只刷新有变化的地方（比如界面，样式等）

全局安装 npm install webpack-dev-server -g
安装到项目开发依赖里 npm install webpack-dev-server --save-dev

命令执行：
webpack-dev-server --inline --hot

Project is running at http://localhost:8080/
webpack output is served from /
Hash: 54fb3429ee7a8cf1b9ff
...

提示打开 http://localhost:8080/
打开调试模式，重新刷新一下，Console 菜单下打印出（表示热替换已启动）

[HMR] Waiting for update signal from WDS...
bundle.js:4398 [WDS] Hot Module Replacement enabled.

为了实现热替换，在 entry.js 创建一个输入框

let input = document.createElement('input')
document.getElementById('app').appendChild(input)

保存，当前页面上就出现了一个文本输入框，在文本框随意输入内容
再修改下 style.css 的样式

body{
	background-color: blue;
	color: #fff;
	font-size: 20px;
}

保存，此时页面样式变化了，文本框输入的内容还存在，说明模块热启动成功，如果手动刷新当前页面，文本框内容就没有了。

关掉正在执行的热替换命令
ctrl+c

源码

结语

好了，从现在开始你也可以用webpack编译js,css文件进行工作了，有什么不对的地方，欢迎指出，谢谢。

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webpack-test #2

webpack-test #2

boloog commented Jun 21, 2017

webpack-test #2

webpack-test #2

Comments

boloog commented Jun 21, 2017

介绍

安装

使用

和其它模块一起打包

安装loader (转换器)

webpack 配置文件实现命令打包

调试代码 source-map 显示编辑之前的文件

bable babel-preset-es2015 处理 es2015 的js新写法

webpack-dev-server 模块热替换

源码

结语

调试代码 `source-map` 显示编辑之前的文件