详解webpack+express多页站点开发

首页

');

page1

module.exports = {
entry: { //配置入口文件，有几个写几个
index: './src/js/page/index.js',page1: './src/js/page/page1.js'
},output: {
path: path.join(__dirname,'./public/dist/'),//输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
publicPath: '/dist/',//模板、样式、脚本、图片等资源对应的server上的路径
filename: 'js/[name].js',//每个页面对应的主js的生成配置
chunkFilename: 'js/[id].chunk.js' //chunk生成的配置
},module: {
loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。
{
test: /.css$/,//配置css的抽取器、加载器。'-loader'可以省去
loader: ExtractTextPlugin.extract('style-loader','css-loader')
},{
test: /.less$/,//配置less的抽取器、加载器。中间!有必要解释一下，
//根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
//你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
loader: ExtractTextPlugin.extract('css!less')
},{
test: /.scss$/,//配置scss的抽取器、加载器。中间!有必要解释一下，
//根据从右到左的顺序依次调用scss、css加载器，前一个的输出是后一个的输入
//你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
loader: ExtractTextPlugin.extract('css!scss')
},{
//html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
//比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
test: /.html$/,loader: "html?attrs=img:src img:data-src"
},{
//文件加载器，处理文件静态资源
test: /.(woff|woff2|ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,loader: 'file-loader?name=./fonts/[name].[ext]'
},{
//图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
//如下配置，将小于8192byte的图片转成base64码
test: /.(png|jpg|gif)$/,loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
}
]
},plugins: [
new webpack.ProvidePlugin({ //加载jq
$: 'jquery'
}),new webpack.optimize.CommonsChunkPlugin({
name: 'commons',// 将公共模块提取，生成名为commons的chunk
chunks: ['index','page1'],//提取哪些模块共有的部分
minChunks: 2 // 提取至少2个模块共有的部分
}),new ExtractTextPlugin('css/[name].css'),//单独使用link标签加载css并设置路径，相对于output配置中的publickPath

//HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
  favicon: './src/favicon.ico',//favicon路径，通过webpack引入同时可以生成hash值
  filename: '../../views/index.html',//生成的html存放路径，相对于path
  template: './src/template/index.html',//html模板路径
  inject: 'body',//js插入的位置，true/'head'/'body'/false
  hash: true,//为静态资源生成hash值
  chunks: ['commons','index'],//需要引入的chunk，不配置就会引入所有页面的资源
  minify: { //压缩HTML文件  
    removeComments: true,//移除HTML中的注释
    collapseWhitespace: false //删除空白符与换行符
  }
}),new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
  favicon: './src/favicon.ico',//favicon路径，通过webpack引入同时可以生成hash值
  filename: '../../views/page1.html',//生成的html存放路径，相对于path
  template: './src/template/page1.html',//html模板路径
  inject: true,'list'],//移除HTML中的注释
    collapseWhitespace: false //删除空白符与换行符
  }
})

// new webpack.HotModuleReplacementPlugin() //热加载

],//使用webpack-dev-server，提高开发效率
// devServer: {
// contentBase: './',// host: 'localhost',// port: 9090,//默认8080
// inline: true,//可以监控js变化
// hot: true,//热启动
// }
};

首页

//判断开发模式
var debug = process.env.NODE_ENV !== 'production';
var getEntry = function(globPath,pathDir) {
var files = glob.sync(globPath);
var entries = {},entry,dirname,basename,pathname,extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry); //文件目录
extname = path.extname(entry); //后缀名
basename = path.basename(entry,extname); //文件名
pathname = path.join(dirname,basename);
pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir),'') : pathname;
entries[pathname] = ['./' + entry]; //这是在osx系统下这样写 win7 entries[basename]
}
console.log(entries);
return entries;
}

//入口(通过getEntry方法得到所有的页面入口文件)
var entries = getEntry('src/js/page/*/.js','src/js/page/');
//提取哪些模块共有的部分从entries里面获得文件名称
var chunks = Object.keys(entries);
//模板页面(通过getEntry方法得到所有的模板页面)
var pages = Object.keys(getEntry('src/template/*/.html','src/template/'));

console.log(pages)

var config = {
entry: entries,output: {
path: path.join(__dirname,//每个页面对应的主js的生成配置
chunkFilename: 'js/[id].chunk.js?[chunkhash]' //chunk生成的配置
},module: {
loaders: [ //加载器
{
test: /.css$/,loader: ExtractTextPlugin.extract('style','css')
},loader: ExtractTextPlugin.extract('css!less')
},{
test: /.html$/,loader: "html?-minimize" //避免压缩html,https://github.com/webpack/html-loader/issues/50
},{
test: /.(woff|woff2|ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,loader: 'file-loader?name=fonts/[name].[ext]'
},{
test: /.(png|jpe?g|gif)$/,loader: 'url-loader?limit=8192&name=imgs/[name]-[hash].[ext]'
}
]
},new CommonsChunkPlugin({
name: 'commons',// 将公共模块提取，生成名为commons的chunk
chunks: chunks,minChunks: chunks.length // 提取所有entry共同依赖的模块
}),//单独使用link标签加载css并设置路径，相对于output配置中的publickPath
debug ? function() {} : new UglifyJsPlugin({ //压缩代码
compress: {
warnings: false
},except: ['$super','$','exports','require'] //排除关键字
}),]
};

pages.forEach(function(pathname) {
var conf = {
filename: '../../views/' + pathname + '.html',//生成的html存放路径，相对于path
template: 'src/template/' + pathname + '.html',//html模板路径
inject: false,//js插入的位置，true/'head'/'body'/false
/*

• 压缩这块，调用了html-minify，会导致压缩时候的很多html语法检查问题，
• 如在html标签属性上使用{{...}}表达式，所以很多情况下并不需要在此配置压缩项，
• 另外，UglifyJsPlugin会在压缩代码的时候连同html一起压缩。
• 为避免压缩html，需要在html-loader上配置'html?-minimize'，见loaders中html-loader的配置。
  */
  // minify: { //压缩HTML文件
  // removeComments: true,//移除HTML中的注释
  // collapseWhitespace: false //删除空白符与换行符
  // }
  };
  if (pathname in config.entry) {
  favicon: './src/favicon.ico',//favicon路径，通过webpack引入同时可以生成hash值
  conf.inject = 'body';
  conf.chunks = ['commons',pathname];
  conf.hash = true;
  }
  config.plugins.push(new HtmlWebpackPlugin(conf));
  });
  module.exports = config;

pages:
[ 'index','page1' ]