简介
webpack是以模块依赖和生成静态资产代表这些模块。通俗一点理解就是，把所有依赖的脚本，样式，统一打包，减少前端请求，并且可压缩，可混淆
优势
- 支持ES6
- 支持AMD/CMD
- 插件丰富
- 并压/混淆，模块依赖
- 减少网络请求，加快前端渲染
- 利于模块化开发
劣势
- 需要了解node.js
- 存在学习成本
- 不利于入门学习
- debug困难
类似框架
- grunt
- gulp
- bower
- karma
入门例子
- 依赖node.js
- 依赖webpack模块
安装依赖
node.js 安装
下载后执行
node -v运行成功则安装成功
webpack 模块依赖
npm install webpack -g-g代表全局安装
项目下使用webpack
所有命令在项目根目录执行
初始化
npm init执行该命令，会要求输入一些，如项目项目名，项目描述，作者，等信息，执行完后会出现一个package.json的文件在项目的根目录
项目加入依赖
webpack
npm install webpack --save-dev改命令执行后会修改package.json，在devDependencies下加入了webpack
当然也可以通过@来指定其他版本如
npm install webpack@1.2.x --save-devcss-loader style-loader
让项目支持css压缩和样式加载器
npm install css-loader style-loader目录结构
入口文件（index.html）
bundle.js 是压缩之后的文件，是webpack自动生成，下面会说
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="../scripts/bundle.js" charset="utf-8"></script>
</body>
</html>业务脚本（content.js）
module.exports = "It works from content.js!";样式脚本（style.css）
body {
background: yellow;
}入口脚本（entry.js）
require("../css/style.css");
document.write(require("./content.js"));webpack配置（webpack.config.js）
module.exports = {
//入口脚本
entry: "./src/modules/main/scripts/entry.js",
//输出
output: {
//输出目录
path: './src/modules/main/scripts',
//输出脚本
filename: "bundle.js"
},
module: {
//压缩器
loaders: [
//css后缀的，采用style!css压缩器
{ test: /\.css$/, loader: "style!css" }
]
}
};执行命令
webpack
结果
直接访问index.html
存在问题
- 每次需要执行命令打包繁琐
- 脚本多个时还不能加入依赖
- 目录结构配置困难
- 打包后文件名过于死板
该上面的问题会得到解决，在后面的博文进行写出