2017-3-26 webpack入门（一）

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 常用命令

wbpack --progress --colors

过参数让编译的输出内容带有进度和颜色

webpack --progress --colors --watch

如果不想每次修改模块后都重新编译，那么可以启动监听模式

webpack-dev-server --progress --colors

webpack-dev-server会在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面

webpack --display-error-details

来打印错误详情

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')
  ]
  }