webpack学习

一、什么是webpack？

　　Webpack 是德国开发者 Tobias Koppers 开发的模块加载器Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等..因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。

　　Webpack 是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能，并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流。

　　对应各种不同文件类型的资源, Webpack 有对应的模块 loader比如 CoffeeScript 用的是 coffee-loader, 其他还有很多:http://webpack.github.io/docs/list-of-loaders.html大致的写法也就这样子:

module.exports = {
	……
	module:{
		loader:[
			 { test: /\.coffee$/, loader: ‘coffee-loader‘ },
     		 { test: /\.js$/, loader: ‘jsx-loader?harmony‘ }
		]
	}
}　

二、webpack对CommonJS 与 AMD 支持

　　Webpack 对 CommonJS 的 AMD 的语法做了兼容, 方便迁移代码，不过实际上, 引用模块的规则是依据 CommonJS 来的

require(‘lodash‘) // 从模块目录查找
require(‘./file‘) // 按相对路径查找

　　AMD 语法中, 也要注意, 是按 CommonJS 的方案查找的

define (require, exports. module) ->
  require(‘lodash‘) # commonjs 当中这样是查找模块的
  require(‘./file‘)

三、webpack安装与配置

　　1.安装webpack工具

npm install -g webpack

　　2.初始化package.json，局部安装webpack包

npm init并按照需要填写内容

npm install --save-dev webpack

　　Webpack 使用一个名为 webpack.config.js 的配置文件，例如要编译 JSX，先安装对应的 loader: npm install babel-loader --save-dev。

　　3.webpack配置示例demo：

var webpack = require(‘webpack‘);
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(‘common.js‘);

module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : ‘./src/js/page/index.js‘,
        main:[‘index.js‘,‘main.js‘]
    },
    //入口文件输出配置
    output: {
        path: ‘dist/js/page‘,
        publicPath:‘https://jd.com/‘
        filename: ‘[name].js‘
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: ‘style-loader!css-loader‘ },
            { test: /\.js$/, loader: ‘jsx-loader?harmony‘ },
            { test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
            { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192‘}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: ‘E:/github/flux-example/src‘, //绝对路径
        extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.scss‘],
        alias: {
            AppStore : ‘js/stores/AppStores.js‘,
            ActionType : ‘js/actions/ActionType.js‘,
            AppAction : ‘js/actions/AppAction.js‘
        }
    }
};

参考资料：

　　webpack的github

　　Webpack 入门指迷

　　Webpack 配置 React 开发环境

　　webpack笔记——基础概念+基础实例

　　React+Webpack快速上手指南

　　webpack英文文档