2017-3-26 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')

  ]

  }