webpack 多页面构建

目标:

  • 基于webpack支持react多页面构建(不用gulp,gulp-webpack 构建速度太慢[3]), generator-react-webpack 对单页面支持很好,但对多页面,需要改造
  • 提高开发人员的效率
  • 并能对项目进行足够的性能优化
  • 提高构建的效率

配置文件编写(webpack.config.js)

示例:

var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var node_dir = path.join(__dirname, './node_modules/');
var HtmlWebpackPlugin = require('html-webpack-plugin');

// 获取所有入口文件
var getEntry = function(globPath) {
    var entries = {
        vendor: ['jquery','react','react-dom','./src/app'] // 类库
    };
    glob.sync(globPath).forEach(function(entry) {
        var pathname = entry.split('/').splice(-2).join('/').split('.')[0];
        entries[pathname] = [entry];
    });
    console.log(entries);
    return entries;
};
// 判断是否是在当前生产环境
var isProduction = process.env.NODE_ENV === 'production';
var entries = getEntry('./src/view/*/*.jsx');
var chunks = Object.keys(entries);
module.exports = {
    entry: entries,
    output: {
        path: path.join(__dirname, './dist'),
        filename: isProduction ?'js/[name].[hash:8].js':'js/[name].js',
        publicPath: '/dist/',
        chunkFilename: 'chunk/[name].chunk.js'
    },
    module: {
        noParse:[
            /*path.join(node_dir,'./react/dist/react.min.js'),
            path.join(node_dir,'./jquery/dist/jquery.min.js'),
            path.join(node_dir,'./react-dom/dist/react-dom.min.js')*/
        ],
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            },
            exclude: node_dir
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style', 'css')
        }, {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract('style', 'css!less')
        }, {
            test: /\.(png|jpe?g|gif)$/,
            loader: 'url?limit=8192&name=img/[hash:8].[ext]'
        }, {
            //文件加载器,处理文件静态资源
            test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file?limit=10000&name=fonts/[hash:8].[ext]'
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.json'],
        alias: {
            mod: node_dir
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery', // 使jquery变成全局变量,不用在自己文件require('jquery')了
            jQuery: 'jquery',
            React: 'react',
            ReactDOM: 'react-dom'
        }),
        // 类库统一打包生成一个文件
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: isProduction ? 'js/vendor.[hash:8].js':'js/vendor.js',
            minChunks: 3 // 提取使用3次以上的模块,打包到vendor里
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin(isProduction ? 'css/[name].[hash:8].css':'css/[name].css')
    ],
    devtool: isProduction ? null : 'source-map'
};
// 生成HTML文件
chunks.forEach(function(pathname) {
    if (pathname == 'vendor') {
        return;
    }
    var conf = {
        title: 'My App',
        filename: isProduction? '../view/' + pathname + '.html' : pathname + '.html',
        template: './src/template.html',
        inject: 'body',
        minify: {
            removeComments: true,
            collapseWhitespace: false
        }
    };
    if (pathname in module.exports.entry) {
        conf.chunks = ['vendor', pathname];
        conf.hash = false;
    }
    module.exports.plugins.push(new HtmlWebpackPlugin(conf));
});

Webpack的配置主要包括以下几大项目:

  • entry:js入口源文件

    • 多入口配置

      • 为了使用多入口文件,你可以给entry传入一个对象。对象的key代表入口点名字,value代表入口点。当使用多入口点的时候,需要重载output.filename,否责每个入口点都写入到同一个输出文件里面了。使用[name]来得到入口点名字。

      • 例子:

         {
         	entry: {
         		a: "./a",
         		b: "./b",
         		//支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出
         		//该方法可以添加多个彼此不互相依赖的文件
         		c: ["./c", "./d"]
         	},
         	output: {
         		path: path.join(__dirname, "dist"),
         		filename: "[name].entry.js" // a.enrty.js, b.enrty.js, c.entry.js
         	}
         }
  • output:生成文件

    • output参数是个对象,定义了输出文件的位置及名字.

    • 例子:

       output: {
       	path: "dist/js/page",
       	publicPath: "/output/",
       	filename: "[name].bundle.js"
       }
       
       path: 打包文件存放的绝对路径 
       publicPath: 网站运行时的访问路径 
       filename:打包后的文件名
  • module:模块加载器

    • 在webpack中JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等静态文件都是模块,不同模块的加载是通过模块加载器(webpack-loader)来统一管理的。loaders之间是可以串联的,一个加载器的输出可以作为下一个加载器的输入,最终返回到JavaScript上。

    • 例子:

       module: {
       	//加载器配置
       	loaders: [
       		//.css 文件使用 style-loader 和 css-loader 来处理
       		{ 
       			test: /\.css$/, 
       			loader: 'style-loader!css-loader' 
       		},
       		//.js 文件使用 jsx-loader 来编译处理
       		{ 
       			test: /\.js$/, 
       			loader: 'jsx-loader?harmony' 
       		},
       		//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
       		{ 
       			test: /\.scss$/, 
       			loader: 'style!css!sass?sourceMap'
       		},
       		//图片文件使用 url-loader 来处理,小于8kb的直接转为base64
       		{ 
       			test: /\.(png|jpg)$/, 
       			loader: 'url-loader?limit=8192'
       		}
       	]
       }	
    • 多个loader可以用在同一个文件上并且被链式调用。链式调用时从右到左执行且loader之间用“!”来分割。

    • 模块加载器(loader)自身可以根据传入不同的参数进行配置。

  • resolve:文件路径的指向

    • webpack在构建包的时候会按目录的进行文件的查找,resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀:

    • 例子:

       resolve: {
       	//查找module的话从这里开始查找
       	root: '/pomy/github/flux-example/src', //绝对路径
       	//自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
       	extensions: ['', '.js', '.json', '.scss'],
       	//模块别名定义,方便后续直接引用别名,无须多写长长的地址
       	alias: {
       		AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
       		ActionType : 'js/actions/ActionType.js',
       		AppAction : 'js/actions/AppAction.js'
       	}
       }
  • plugins:插件,比loader更强大,能使用更多webpack的api

    • 插件一般都是用于输出bundle的node模块。例如,uglifyJSPlugin获取bundle.js然后压缩和混淆内容以减小文件体积。类似的extract-text-webpack-plugin内部使用css-loader和style-loader来收集所有的css到一个地方最终将结果提取结果到一个独立的”styles.css“文件,并且在html里边引用style.css文件。

    • 例子:

       var ExtractTextPlugin = require("extract-text-webpack-plugin");
       
       module: {
       	loaders: [
       		{
       			test: /\.css$/,
       			loader: ExtractTextPlugin.extract("style-loader", "css-loader")
       		},
       		{
       			test: /\.less$/,
       			loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
       		}
       	]
       },
       plugins: [
       	new ExtractTextPlugin("[name].css")
       ]
    • code-splitting 插件CommonsChunkPlugin

      • 将多次引用的模块单独打包

         new webpack.optimize.CommonsChunkPlugin({
         	name: 'vendor',
         	filename: isProduction ? 'js/vendor.[hash:8].js':'js/vendor.js',
         	minChunks: 3 // 提取使用3次以上的模块,打包到vendor里
         })
        
    • 多页面 html 生成插件 html-webpack-plugin

      • 例子:

         var HtmlWebpackPlugin = require('html-webpack-plugin');
         
         chunks.forEach(function(pathname) {
         if (pathname == 'vendor') {
             return;
         }
         var conf = {
             title: 'My App',
             filename: isProduction? '../view/' + pathname + '.html' : pathname + '.html',
             template: './src/template.html',
             inject: 'body',
             minify: {
                 removeComments: true,
                 collapseWhitespace: false
             }
         };
         if (pathname in module.exports.entry) {
             conf.chunks = ['vendor', pathname];
             conf.hash = false;
         }
         module.exports.plugins.push(new HtmlWebpackPlugin(conf));
        });
        
      • src目录下有个template.html文件,无需引入任何css和js,webpack会自动帮我们打包引入,<%= htmlWebpackPlugin.options.title %>读取配置好的页面标题

         <!DOCTYPE html>
         <html lang="en">
         <head>
         	<meta charset="UTF-8" />
         	<title> <%= htmlWebpackPlugin.options.title %> </title>
         </head>
         <body>
             <div id="app"></div>
         </body>
         </html>
      • 最终通过打包,会生成对应入口的html文件,
        比如src/view/index/index.js会生成view/index/index.html

         <!DOCTYPE html>
         <html lang="en">
         <head>
         	<meta charset="UTF-8">
         	<title> My App </title>
         	<link href="/dist/css/vendor.abf9657f.css" rel="stylesheet">
         	<link href="/dist/css/index/index.abf9657f.css" rel="stylesheet">
         </head>
         <body>
             <div id="app"></div>
         	<script type="text/javascript" src="/dist/js/vendor.abf9657f.js"></script>
         	<script type="text/javascript" src="/dist/js/index/index.abf9657f.js"></script>
         </body>
         </html>
      • 你会发现相关资源文件都自动引入了,十分便捷。

webpack 常用命令

  • webpack 最基本的启动webpack命令
  • webpack -w 提供watch方法,实时进行打包更新
  • webpack -p 对打包后的文件进行压缩
  • webpack -d 提供SourceMaps,方便调试
  • webpack --colors 输出结果带彩色,比如:会用红色显示耗时较长的步骤
  • webpack --profile 输出性能数据,可以看到每一步的耗时
  • webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块

webpack dev server

  • 配置示例:

     var webpack = require('webpack');
     var WebpackDevServer = require('webpack-dev-server');
     var config = require('./webpack.config.js');
     
     for (var i in config.entry) {
     	// 每个入口文件加入 client websocket 热加载脚本
     	config.entry[i].unshift(
     		"webpack-dev-server/client?http://127.0.0.1:3000/", 
     		"webpack/hot/only-dev-server"
     	);
     }
     config.module.loaders.unshift({
     	test: /\.jsx?$/,
     	loader: 'react-hot',
     	exclude: /node_modules/
     });
     config.plugins.push(new webpack.HotModuleReplacementPlugin());
     new WebpackDevServer(webpack(config), {
     	publicPath: config.output.publicPath,
     	hot: true,
     	historyApiFallback: true,
     	stats: { colors: true }
     	}).listen(3000, '127.0.0.1', function (err, result) {
     	if (err) {
     	    console.log(err);
     	}
     	console.log('server start');
     });
  • 用处

    • 开启服务器调试环境
    • 解决以下两个问题:
      • webpack --watch 打包速度慢
      • 不能做到hot replace
  • 配置

    • Content Base

      • 如果不进行设定的话,服务器伺服默认是在当前目录下。

      • 命令行设置 webpack-dev-server --content-base build/

      • webpack 配置

         devServer: {
         	contentBase: './src/',
         	historyApiFallback: true,
         	hot: true,
         	port: defaultSettings.port,
         	publicPath: '/assets/',
         	noInfo: false
         }
    • publicPath

      • webpack server 伺服的 bundle 是在内存中的,其相对路径由 publicPath 字段指定。
      • 如果用以上的配置,bundle 可以通过地址 localhost:8080/assets/bundle.js 访问到。(注意:访问的不是output目录下的文件而是内存中的数据!)
  • 自动更新和热替换

    • 配置:

       var config = require("./webpack.config.js");
       config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
       var compiler = webpack(config);
       var server = new webpackDevServer(compiler, {
       	hot: true
       	...
       });
       server.listen(8080);

      关键配置: config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");

      在每个入口文件注入 client websocket 热加载脚本。

posted @ 2017-01-17 20:07  ddlove  阅读(2921)  评论(0编辑  收藏  举报