webpack构建静态多页应用项目框架 | 金金求上进

- webpack-multiplepage
 + build
 - source
   - components   ＃组件
     - common
       + styles   #公共样式
     + header    #头部组件
     + footer    
     - layout    #布局组件
       index.js   ＃layout入口文件，,可导入依赖，及写一些逻辑代码
       layout.styl    #layout样式
       bg.png
       layout.jade   #页面布局jade，include了header.jade和footer.jade
   - pages    ＃页面
     + about   #关于模块
     + help    #帮助模块
     - index   #首页模块
       index.jade    #首页内容，extends layout.jade
       index.js    #首页入口文件,可导入依赖，及写一些逻辑代码
       index.styl    #首页样式
 .eslintrc
 .eslintignore
 .gitignore
 webpack.config.js    #webpack配置文件
 package.json
 README.md

- build
  - assets    #字体，图片资源
    + fonts
    + images
  - common    #公用文件，包含了第三方依赖和抽离出来的公共代码
    common.****.js  
    common.****.css
  - about   ＃about模块
    about.****.js   
    about.****.css
    about.html
  + help
  - index
    index.****.js
    index.****.css
  index.html    #index首页置于根目录，方便webpack监听

// 依赖
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var autoprefixer = require('autoprefixer');
var args = require('yargs').argv;

// 命令行传入的环境参数
// 可通过--prod,--mock传入
var isProd = args.prod;
var isMock = args.mock;

var plugins = [
   // Automatically loaded modules
   new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery',
       'window.jQuery': 'jquery'
   }),
   // create global constants which can be configured at compile time
   new webpack.DefinePlugin({
       __PROD__: isProd,
       __MOCK__: isMock
   }),
   // 抽取公共模块
   new webpack.optimize.CommonsChunkPlugin('common', isProd ? 'common/common.[hash].js' : 'common/common.js'),
   // 对每个entry抽取css依赖,生成css文件
   // 注意：ExtractTextPlugin需在config的plugin及loader中一起使用
   new ExtractTextPlugin(isProd ? '[name]/[name].[contenthash].css' : '[name]/[name].css'),
   // 热替换
   new webpack.HotModuleReplacementPlugin()
];

// 生成html，并为html插入css,js等依赖
// 将首页的index.html 置于根目录
plugins.push(
   new HtmlWebpackPlugin({
       template: './source/pages/index/index.jade',
       filename: 'index.html',
       chunks: ['common', 'index']
   }),
   new HtmlWebpackPlugin({
       template: './source/pages/help/help.jade',
       filename: 'help/index.html',
       chunks: ['common', 'help']
   }),
   new HtmlWebpackPlugin({
       template: './source/pages/about/about.jade',
       filename: 'about/index.html',
       chunks: ['common', 'about']
   })
);


var base = './';
// 多个入口文件集合
var entryJs = {
   index: [base + '/source/pages/index/index.js'],
   help: [base + '/source/pages/help/help.js'],
   about: [base + '/source/pages/about/about.js']
};
// 通用第三方模块 ，最后和抽离的公共模块合并
entryJs['common'] = [
   // 3rd dependencies
   'normalize.css/normalize.css',
   'bootstrap/dist/js/bootstrap.min',
   'bootstrap/dist/css/bootstrap.min.css',
   'font-awesome/css/font-awesome.min.css'
];


if (isProd) {
  // 生产环境优化
   plugins.push(
       new webpack.NoErrorsPlugin(),
       // Search for equal or similar files and deduplicate them in the output.
       new webpack.optimize.DedupePlugin(),
       // Minimize all JavaScript output of chunks
       new webpack.optimize.UglifyJsPlugin({
           compress: {
               warnings: false
           },
           mangle: false
       }),
       new webpack.optimize.OccurenceOrderPlugin()
   );
}

module.exports = {
   entry: entryJs,
   // 打包文件输出配置
   output: {
       path: base + 'build',
       // e.g index/index.****.js
       filename: isProd ? '[name]/[name].[hash].js' : '[name]/[name].js',
       chunkFilename: isProd ? '[name]/[name].[hash].chunk.js' : '[name]/[name].chunk.js'
   },
   module: {
       preLoaders: [{
           test: /\.js$/,
           loader: 'eslint',
           exclude: /node_modules/
       }],
       loaders: [{
           test: /\.html$/,
           loader: 'html'
       }, {
           test: /\.jade$/,
           loader: 'jade'
       }, {
           test: /\.styl$/,
           loader: ExtractTextPlugin.extract('vue-style', 'css?sourceMap!postcss!stylus', {
             // 指定build根目录对css打包存储位置的路径，默认css直接放在根目录下
             // 各个css均被打包到build/*/文件夹中，所以路径为'../'
               publicPath: '../'
           })
       }, {
           test: /\.css$/,
           loader: ExtractTextPlugin.extract('vue-style', 'css?sourceMap', {
               publicPath: '../'
           })
       }, {
           test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
           loader: 'file?name=assets/fonts/[name].[ext]?[hash]'
       }, {
           test: /\.(png|jpg)$/,
           loader: 'url?limit=8192&name=assets/images/[name].[hash].[ext]'
       }]
   },
   plugins: plugins,
   debug: !isProd,
   // sourceMap的几种模式差别解析，可参考https://segmentfault.com/a/1190000004280859这篇文章
   devtool: isProd ? false : 'eval-cheap-module-source-map',
   // 可访问localhost:8080查看效果
   devServer: {
       contentBase: base + 'build',
       historyApiFallback: true,
       inline: true,
       stats: {
           modules: false,
           cached: false,
           colors: true,
           chunk: false
       },
       host: '0.0.0.0',
       port: 8080
   },
   // 使用postcss自动给css样式加前缀
   postcss: function() {
       return [autoprefixer];
   }
};

// npm install --save-dev glob
var getFiles = function(filepath) {
 var files = glob.sync(filepath);
 var entries = {};
 files.forEach(function(item){
   var pathname = path.basename(item, path.extname(item))
   entries[pathname] = item;
 });
 return entries;
}

var pages = getFiles('./source/pages/*/*.jade');
// 生成html，插入依赖
Object.keys(pages).forEach(function(pageName){
   plugins.push(
     new HtmlWebpackPlugin({
         template: './source/pages/'+ pageName+ '/' pageName + '.jade',
         filename: pageName +'.html',
         chunks: [ 'vendor', pageName],
     })
   );
});

var entryJs = getFiles('./source/pages/*/*.js');