2017-3-26 webpack入门(一)
webpack
前端
打包
最近项目里用到了webpack特意总结一下。来源:http://webpackdoc.com
1 概念
1.1 webpack
是一个前端打包工具,对一些静态资源(css js img)等进行分析
1.2 CommonJS
CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式,可以使每个模块它自身的命名空间中执行。该规范的主要内容是,=模块必须通过 module.exports 导出对外的变量或接口,通过 require() 来导入=其他模块的输出到当前模块作用域中。
1.3 AMD 规范
AMD(异步模块定义)是为浏览器环境设计的,因为 CommonJS 模块系统是同步加载的,当前浏览器环境还没有准备好同步加载模块的条件。例如:
定义一个名为 myModule 的模块,它依赖 jQuery 模块:
define('myModule', ['jquery'], function($) {
// $ 是 jquery 模块的输出
$('body').text('hello world');
});
// 使用
define(['myModule'], function(myModule) {});
2 常用命令
过参数让编译的输出内容带有进度和颜色
如果不想每次修改模块后都重新编译,那么可以启动监听模式
webpack-dev-server会在 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面
来打印错误详情
3 配置文件
3.1 如果不用命令行,webpack默认按照webpack.config.js的配置进行打包操作
var webpack = require('webpack')
module.exports = {
entry: './entry.js',//入口文件
output: {
path: __dirname,
filename: 'bundle.js'//要打包的文件
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}//配置loader路径,例如:require('./style.css')
]
},
plugins: [//配置插件,给文件头部加注释
new webpack.BannerPlugin('This file is created by hwlv')
]
}