webpack 用法

webpack是模块加载器。webpack当中，所有的资源都被当作是模块，js css 图片等。webpack中需要加载不同的模块来处理文件。 http://webpack.github.io/docs/list-of-loaders.html 如jsx 需要jsx-loader模块。它支持CommonJS  和amd。需要创建一个配置文件：webpack.config.js运行：webpack   webpack -watch  监听文件变化 自动打包但不会刷新浏览器

webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

webpack -p    //压缩混淆脚本，这个非常非常重要！

webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

需要用require('')来引用各个模块，如react-addons  如jsx模块。它们肯定需要编译的。所以webpack 提供了loader加载器来实现不同的功能。amd模块的引用 ：define([],function(){function fn(){console.log('amd 规范写的模块')};return {printf:fn}})var add_module1=require('./add_module1.js');add_module1.printf();也是直接require() 然后使用。commonjs模块引用：exports.getname=function(){console.log('star name');}//commonjs 模块引用 var comm=require('./comm_module1.js');comm.getname();页面里直接引用

<script src="dist/js/page/common.js"></script>
<script src="dist/js/page/index.js"></script>

入口js的写法：app.jsx:var React = require('react/addons');var SurveyList = require('./SurveyList.jsx');//amd 模块引用 var add_module1=require('./add_module1.js');add_module1.printf();//commonjs 模块引用 var comm=require('./comm_module1.js');comm.getname();require('./index.css');//引用cssrequire('./less.less');//引用lessReact.render(<SurveyList></SurveyList>, document.querySelector('#div1'));在 AMD/CMD 中，我们需要对不符合规范的模块（比如一些直接返回全局变量的插件）进行 shim 处理，这时候我们需要使用 exports-loader 来帮忙：loaders：

{ test: require.resolve("./src/js/tool/swipe.js"),  loader: "exports?swipe"}

脚本里的引用 ：

require('./tool/swipe.js');
swipe();

自定义公共模块提取：在文章开始我们使用了 CommonsChunkPlugin 插件来提取多个页面之间的公共模块，并将该模块打包为 common.js 。但有时候我们希望能更加个性化一些，我们可以这样配置：

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3",
ap1: "./admin/page1",
ap2: "./admin/page2"
},
output: {
filename: "[name].js"
},
plugins: [
new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
]
};

独立打包样式文件：

有时候可能希望项目的样式能不要被打包到脚本中，而是独立出来作为.css，然后在页面中以<link>标签引入。这时候我们需要 extract-text-webpack-plugin 来帮忙：

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")],

也可以new ExtractTextPlugin("style.css", {allChunks: true})

这样把所有css都打包到style里，页面里只引用一个css

与grunt/gulp配合

gulp.task("webpack", function(callback) {// run webpackwebpack({// configuration}, function(err, stats) {if(err) throw new gutil.PluginError("webpack", err);gutil.log(d8ff"[webpack]", stats.toString({// output options}));callback();});});

需要把配置文件写在webpack({}）对象里。

http://webpack.github.io/docs/usage-with-gulp.html

http://webpack.github.io/docs/configuration.html

如果是通过gulp插件gulp-webpack，则可以在gulpfile中写上gulp任务：

var gulp = require('gulp');

var webpack = require('gulp-webpack');

var webpackConfig = require('./webpack.config');gulp.task("webpack", function() {return gulp.src('./').pipe(webpack(webpackConfig)).pipe(gulp.dest('./build'));});