今天研究了下webpack，
Paste_Image.png
现将相关知识整理如下：
一、安装及使用
1、使用Node.js cd到指定文件夹中，再采用npm init 初始化得到package.json等文件；
2、安装webpack （安装 webpack 依赖）
npm install webpack --save-dev
3、首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js
我的index.html 文件：
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
我的 entry.js文件：
// entry.js
document.write('It works.')
4、使用webpack entry.js bundle.js命令，来编译 entry.js 并打包到 bundle.js；
此时我们用浏览器打开 index.html 将会看到 It works.字样。
5、接下来添加一个模块 module.js 并修改入口 entry.js
// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块
6、使用webpack entry.js bundle.js重新打包
此后我们刷新页面，会看到页面变成了 It works.It works from module.js.字样。
二、Loader
由于webpack本身只能处理javascript模块，如果需要处理其他类型的文件比如css等，则需要使用到loader；loader其实就是一个模块与文件间的转换器；它本身是一个函数，接受源文件作为参数，返回转换的结果。这样我们就可以通过require处理来加载任何类型的模块或文件比如CoffeeScript、LESS、JSX或图片。
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。
7、使用npm install css-loader style-loader安装 loader
我们要在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。
8、新建 style.css文件并修改之前的 entry.js文件：
/* style.css 文件*/
body { background: yellow; }
/* entry.js 文件*/
require("!style!css!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))
9、再使用webpack entry.js bundle.js重新编译打包，刷新页面，就可以看到黄色的页面背景了。
如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。将 entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css") ，然后执行：
$ webpack entry.js bundle.js --module-bind 'css=style!css'
# 有些环境下可能需要使用双引号
$ webpack entry.js bundle.js --module-bind "css=style!css"
这样就不需要在entry.js中写那么多 loader 前缀了。
三、配置文件
我们在执行webpack命令除了使用命令行的方式传入参数，还可使用指定的配置文件来执行的方式。
默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。
10、确认根目录的package.json
{
"name": "webpack-example",
"version": "1.0.0",
"description": "A simple webpack example.",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "zhaoda",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
}
}
11、创建一个配置文件 webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
}
12、同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
13、最后运行webpack
四、插件
插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。
接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。
14、修改 webpack.config.js，添加 plugins：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by zhaoda')
]
}
15、然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息；
/*! This file is created by zhaoda */
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
// 后面代码省略
五、开发环境
当项目逐渐变大，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
以上根据 Webpack 中文指南 做了适当修改。
webpack官网：https://webpack.github.io/
** webpack其他资料推荐：**
1、入门Webpack，看这篇就够了
2、一小时包教会 —— webpack 入门指南
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
网友评论