CommonJS 和 AMD 是用于 JavaScript 模块管理的两大规范,前者定义的是模块的同步加载,主要用于 NodeJS;而后者则是异步加载,通过 requirejs 等工具适用于前端。随着 npm 成为主流的 JavaScript 组件发布平台,越来越多的前端项目也依赖于 npm 上的项目,或者 自身就会发布到 npm 平台。因此,让前端项目更方便的使用 npm 上的资源成为一大需求。
web 开发中常用到的静态资源主要有 JavaScript、CSS、图片、Jade 等文件,webpack 中将静态资源文件称之为模块。 webpack 是一个 module bundler(模块打包工具),其可以兼容多种 js 书写规范,且可以处理模块间的依赖关系,具有更强大的 js 模块化的功能。Webpack 对它们进行统 一的管理以及打包发布.
1. 对 CommonJS 、 AMD 、ES6 的语法做了兼容
2. 对 js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对 CoffeeScript、ES6 的支持
4. 有独立的配置文件 webpack.config.js
5. 可以将代码切割成不同的 chunk,实现按需加载,降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps,易于调试
7. 具有强大的 Plugin 接口,大多是内部插件,使用起来比较灵活
8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
3.1 创建目录结构
3.2 引入 webpack 依赖文件
在项目根目录打开命令窗口引入项目依赖,全局安装
npm install webpack -g // 全局安装 webpack
3.3 创建配置文件
在项目根目录创建三个或多个 webpack 配置文件
(1)webpack.base.config.js // 公用的配置放在这里面(可通过插件继承)
(2)webpack.develop.config.js // 开发环境中用到的配置文件
(3)webpack.publish.config.js // 生产环境中用到的配置文件
3.4 修改配置文件
- // 这是最基本的一个配置文件
- // 编写配置文件,要有最基本的文件入口和输出文件配置信息等
- // 里面还可以加loader和各种插件配置使用
- var path = require('path');
- module.exports = {
- entry:path.resolve(__dirname,'src/js/app.js'),
- output: {
- path: path.resolve(__dirname, 'deploy'),
- filename: 'bundle.js',
- },
- }
详细参见:
http://webpack.github.io/docs/configuration.html
3.5 运行 webpack
1、通过配置文件运行(通用)
(1)在根目录运行 webpack 的命令,默认会去查找名称为 webpack.config.js 的文件执行,如果没有就会报配置信息没有配置的错误。
Webpack
(2)这时候我们可以通过运行下面的命令进行配置文件的选择
webpack –-config webpack.develop.config.js
2、通过 cli 命令运行(了解)
(1)webpack 的 cli 也提供了命令可以进行运行,例如:
Webpack -watch // webpack 的监视命令,文件发生变化自动编译
webpack --entry ./entry.js --output-path dist --output-file bundle.js
// 配置文件的启动目录和输出目录
webpack 最基本的启动 webpack 命令
webpack -w 提供 watch 方法,实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供 SourceMaps,方便调试
webpack --colors 输出结果带彩色,比如:会用红色显示耗时较长的步骤
webpack --profile 输出性能数据,可以看到每一步的耗时
webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
webpack --display-error-details 方便出错时能查阅更详尽的信息(比如 webpack 寻找模块的过程),从而更好定位到问题。
(2)你可以运行 webpack -h 查看 webpack 的其他命令,自行了解,或者通过英文官网了解 webpack Cli 部分
3、作为 nodejs 的 api 运行(了解)
var webpack = require('webpack');
webpack({
//configuration
}, function(err, stats){});
4 注意 但是我们基本上不用这种直接提供的命令,因为我们需要手动敲打很多字母,我们现在开发通用的方法都是使用配置文件的方式运行
3.6 把运行命令配置到 npm 的 script 中
1 为什么要用 npm 的 script
(1)、npm 是一个非常好用的用来编译的指令,通过 npm 你可以不用去担心项目中使用了什么技术,你只要调用这个指令就可以了,只要你在 package.json 中设置 scripts 的值就可以了。
(2)、真正开发的时候你的 webpack 的命令会敲很长,因为有很多命令需要设置,即便你用了配置文件的方式,但一些 --colors --hot 这些命令是没法在配置文件中配置的。比如:
webpack-dev-server --devtool eval --progress --colors --hot --content-base build
所以你不可能每次都敲这么长,因而我们就把这一大串配置到 npm 中
2 npm 的 script 的使用
(1)、你首先需要安装 webpack,这时候不全局安装
npm i webpack --save
(2)、配置 npm 的 package.json 文件中
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "develop": "webpack --config webpack.develop.config.js",
- "publish": "webpack --config webpack.publish.config.js"
- },
(3)、在根目录打开的命令窗口运行
npm run develop
来源: http://www.cnblogs.com/suixiangff/p/7138993.html