标签：
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 的语法做了兼容, 方便迁移代码，不过实际上, 引用模块的规则是依据 CommonJS 来的
require(‘lodash‘) // 从模块目录查找 require(‘./file‘) // 按相对路径查找
AMD 语法中, 也要注意, 是按 CommonJS 的方案查找的
define (require, exports. module) -> require(‘lodash‘) # commonjs 当中这样是查找模块的 require(‘./file‘)
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‘ } } };
参考资料：
标签：
原文地址：http://www.cnblogs.com/pingfan1990/p/5043938.html
