基于 webpack2 实现的多入口项目脚手架详解

├── dist   # 构建后的目录├── config   # 项目配置文件│ ├── webpack.config.js # webpack 配置文件│ └── postcss.config.js # postcss 配置文件├── src   # 程序源文件│ └── js   # 入口│ ├ └── index.js  # 匹配 view/index.html│ ├ └── user  │ ├ ├ ├── index.js # 匹配 view/user/index.html│ ├ ├ ├── list.js # 匹配 view/user/list.html│ ├ └── lib  # JS 库等，不参与路由匹配│ ├ ├── jquery.js │ └── view   │ ├ └── index.html # 对应 js/index.js│ ├ └── user  │ ├ ├── index.html # 对应 js/user/index.js│ ├ ├── list.html # 对应 js/user/list.js│ └── css   # css 文件目录│ ├ └── base.css  │ ├ └── iconfont.css │ └── font   # iconfont 文件目录│ ├ └── iconfont.ttf  │ ├ └── iconfont.css│ └── img   # 图片文件目录│ ├ └── pic1.jpg  │ ├ └── pic2.png │ └── template  # html 模板目录│ └── head.html  │ └── foot.html  

const ROOT = process.cwd(); // 根目录let entryJs = getEntry('./src/js/**/*.js');/** * 根据目录获取入口 * @param {[type]} globPath [description] * @return {[type]}  [description] */function getEntry (globPath) { let entries = {}; Glob.sync(globPath).forEach(function (entry) { let basename = path.basename(entry, path.extname(entry)), pathname = path.dirname(entry); // js/lib/*.js 不作为入口 if (!entry.match(///js//lib///)) { entries[pathname.split('/').splice(3).join('/') + '/' + basename] = pathname + '/' + basename; } }); return entries;}// webpack 配置const config = { entry: entryJs, output: { filename: 'js/[name].js?[chunkhash:8]', chunkFilename: 'js/[name].js?[chunkhash:8]', path: path.resolve(ROOT, 'dist'), publicPath: '/' }, }

module: { rules: [ {  test: //.js$/,  exclude: /(node_modules|bower_components)/,  use: {  loader: 'babel-loader?id=js',  options: {   presets: ['env']  }  } }, {  test: //.(less|css)$/,  use: ExtractTextPlugin.extract({  fallback: 'style-loader?id=styles',  use: [{   loader: 'css-loader?id=styles',   options: {    minimize: !IsDev   }   },    {   loader: 'less-loader?id=styles'   },    {   loader: 'postcss-loader?id=styles',   options: {    config: {    path: PostcssConfigPath    }   }   }  ]  }) }, {  test: //.(png|jpg|gif)$/,  use: [  {   loader: 'url-loader',   options: {   limit: 100,   publicPath: '',   name: '/img/[name].[ext]?[hash:8]'   }  }  ] }, {  test: //.(eot|svg|ttf|woff)$/,  use: [  {   loader: 'url-loader',   options: {   limit: 100,   publicPath: '',   name: '/font/[name].[ext]?[hash:8]'   }  }  ] }, // @see https://github.com/wzsxyz/html-withimg-loader {  test: //.(htm|html)$/i,  loader: 'html-withimg-loader?min=false' } ]},// postcss.config.jsmodule.exports = { plugins: [ require('autoprefixer')({ browsers: ['> 1%', 'last 5 versions', 'not ie <= 9'], }) ]}

let entryHtml = getEntryHtml('./src/view/**/*.html'), configPlugins;entryHtml.forEach(function (v) { configPlugins.push(new HtmlWebpackPlugin(v));});// webpack 配置resolve: { alias: { views: path.resolve(ROOT, './src/view')  }},/** * 根据目录获取 Html 入口 * @param {[type]} globPath [description] * @return {[type]}  [description] */function getEntryHtml (globPath) { let entries = []; Glob.sync(globPath).forEach(function (entry) { let basename = path.basename(entry, path.extname(entry)), pathname = path.dirname(entry), // @see https://github.com/kangax/html-minifier#options-quick-reference minifyConfig = IsDev ? '' : { removeComments: true, collapseWhitespace: true, minifyCSS: true, minifyJS: true  }; entries.push({ filename: entry.split('/').splice(2).join('/'), template: entry, chunks: ['common', pathname.split('/').splice(3).join('/') + '/' + basename], minify: minifyConfig }); }); return entries;}

let configPlugins = [ new HappyPack({ id: 'js', // @see https://github.com/amireh/happypack threadPool: HappyThreadPool, loaders: ['babel-loader'] }), new HappyPack({ id: 'styles', threadPool: HappyThreadPool, loaders: ['style-loader', 'css-loader', 'less-loader', 'postcss-loader'] }), new webpack.optimize.CommonsChunkPlugin({ name: 'common' }), // @see https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle new ExtractTextPlugin({ filename: 'css/[name].css?[contenthash:8]', allChunks: true })];entryHtml.forEach(function (v) { configPlugins.push(new HtmlWebpackPlugin(v));});// webpack 配置plugins: configPlugins,

// webpack 配置devServer: { contentBase: [ path.join(ROOT, 'src/') ], hot: false, host: '0.0.0.0', port: 8080}

npm start