簡介
基于 webpack2 實現的多入口項目腳手架，主要使用 extract-text-webpack-plugin 實現 js 、css 公共代碼提取，html-webpack-plugin 實現 html 多入口，less-loader 實現 less 編譯，postcss-loader 配置 autoprefixer 實現自動添加瀏覽器兼容前綴，html-withimg-loader 實現 html 內引入圖片版本號添加和模板功能，babel-loader 實現 ES6 轉碼功能， happypack 多線程加速構建速度。
目錄
├── 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
配置
多入口
根據 JS 目錄獲取多入口數組
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
使用 babel 實現 ES2015 轉 ES5，less 轉 css 并使用 postcss 實現 autoprefixer 自動添加瀏覽器兼容，url-loader 實現 css 引用圖片、字體添加版本號，html-withimg-loader 實現 html 引用圖片添加版本號并實現模板功能。
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'], }) ]}View 視圖
根據目錄對應關系，獲取 js 對應的 html 入口
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;}plugins
使用 happypack 多線程加快構建速度，CommonsChunkPlugin 實現提取公用 js 為單獨文件，extract-text-webpack-plugin 實現提取公用 css 為單獨文件，
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-dev-server 實現開發環境自動刷新等功能
// webpack 配置devServer: { contentBase: [ path.join(ROOT, 'src/') ], hot: false, host: '0.0.0.0', port: 8080}開發
npm start
http://localhost:8080/view
構建
cross-env 實現區分開發和生產環境構建
命令 說明
npm run dev 開發環境構建，不壓縮代碼
npm run build 生產環境構建，壓縮代碼
倉庫：https://github.com/givebest/webpack2-multiple-entry
本地下載：http://xiazai.VeVB.COm/201706/yuanma/webpack2-multiple-entry(VeVB.COm).rar
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
