1.安装
webpack依赖nodeJS环境，所以安装webpack之前先确保本机已安装nodeJS，执行以下命令在全局下安装webpack：
sudo npm install -g webpack
2.在项目目录安装依赖
- 在项目目录执行以下命令生成package.json
npm init
- 执行以下命令在项目目录中安装依赖
npm install webpack --save-dev
- 执行以下命令在项目目录中安装webpack开发工具（如果不需要可以省略）
npm install webpack-dev-server --save-dev
3.使用
- 新建一个index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
- 新建一个js的入口文件entry.js
document.write("it works");
- 使用webpack将entry.js编译至引用的bundle.js,编译完成之后在浏览器中打开index.html会显示 it works
webpack entry.js bundle.js
4.为项目添加模块
- 新建一个文件module.js
module.exports=document.write(" it works from module.js")
- 更改js入口文件entry.js
document.write("it works");
document.write(require("./module.js"))
- 重新编译entry.js至bundle.js
- 刷新index.html发现内容变成it works it works from module.js
Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
5.loader载入任意模块资源（以加载css为例）
- 安装
style-loadercss-loader
npm install css-loader style-loader
- 新建css文件styel.css
body{
background:red;
}
- 在入口文件entry.js中引入文件
require("./style.css");
document.write("it works");
document.write(require("./module.js"));
- 重新编译entry.js至bundle.js
webpack entry.js bundle.js --module-bind 'css=style!css'
- 刷新页面，页面背景为红色
6.配置
配置文件中主要配置一些webpack执行命令的一些参数和插件，以下是配置5中css-loader的命令参数例子：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: "./",
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
}
配置完以上参数后，5中在重新编译的时候只需执行以下命令即可
webpack
7.插件
在webpack中使用插件非常的简单，只需要在配置文件中配置插件即可
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: "./",
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by llz')
]
}
以上的plugins配置选项中配置的插件就是在bundle.js的文件头部插入注释
8.开发环境与调试
- 启用webpack服务器
webpack-dev-server
- 启用webpack文件修改实时监控
webpack --watch
- webpack显示文件编译进度
webpack --progress
- 打印编译详细日志
webpack --display-error-details
网友评论