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');//引用css
require('./less.less');//引用less

React.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 webpack
    webpack({
        // configuration
    }, function(err, stats) {
        if(err) throw new gutil.PluginError("webpack", err);
        gutil.log("[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'));
});






Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐