簡介
基于 webpack2 實現(xiàn)的多入口項目腳手架，主要使用 extract-text-webpack-plugin 實現(xiàn) js 、css 公共代碼提取，html-webpack-plugin 實現(xiàn) html 多入口，less-loader 實現(xiàn) less 編譯，postcss-loader 配置 autoprefixer 實現(xiàn)自動添加瀏覽器兼容前綴，html-withimg-loader 實現(xiàn) html 內(nèi)引入圖片版本號添加和模板功能，babel-loader 實現(xiàn) ES6 轉(zhuǎn)碼功能， 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
配置
多入口
根據(jù)
JS目錄獲取多入口數(shù)組
const ROOT = process.cwd(); // 根目錄let entryJs = getEntry('./src/js/**/*.js');/**
* 根據(jù)目錄獲取入口
* @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 實現(xiàn) ES2015 轉(zhuǎn) ES5，less 轉(zhuǎn) css 并使用 postcss 實現(xiàn) autoprefixer 自動添加瀏覽器兼容，url-loader 實現(xiàn) css 引用圖片、字體添加版本號，html-withimg-loader 實現(xiàn) html 引用圖片添加版本號并實現(xiàn)模板功能。
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.js
module.exports = { plugins: [
require('autoprefixer')({ browsers: ['> 1%', 'last 5 versions', 'not ie <= 9'],
})
]
}View 視圖
根據(jù)目錄對應關系，獲取 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')
}
},/**
* 根據(jù)目錄獲取 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 實現(xiàn)提取公用 js 為單獨文件，extract-text-webpack-plugin 實現(xiàn)提取公用 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,開發(fā)
webpack-dev-server 實現(xiàn)開發(fā)環(huán)境自動刷新等功能
// webpack 配置devServer: { contentBase: [
path.join(ROOT, 'src/')
], hot: false, host: '0.0.0.0', port: 8080}開發(fā)
npm start
構建
cross-env 實現(xiàn)區(qū)分開發(fā)和生產(chǎn)環(huán)境構建
| 命令 | 說明 |
|---|---|
npm run dev | 開發(fā)環(huán)境構建，不壓縮代碼 |
npm run build | 生產(chǎn)環(huán)境構建，壓縮代碼 |
倉庫
歡迎 star
https://github.com/givebest/webpack2-multiple-entry
轉(zhuǎn)載請注明出處：http://blog.givebest.cn/webpack/2017/06/25/webpack-multiple-entry.html
感謝親的光臨，如果親感覺這篇文章還不錯或?qū)τH有幫助，歡迎在下面“推薦”點個贊或者隨意金額打賞，親的支持是我最大的動力。
支付寶掃一掃
微信掃一掃
http://www.cnblogs.com/givebest/p/7077255.html
延伸閱讀
- webpack教程(二)——webpack.config.js文件 2017-07-26
- 【前端】一步一步使用webpack+react+scss腳手架重構項目 2017-07-26
- 前端模塊化工具--webpack學習心得 2017-07-25
- webpack 多頁應用架構系列實戰(zhàn) 2017-07-19
- webpack3中文版使用參考文檔--全面解析webpack.config.js 2017-07-11
- 用webpack實現(xiàn)前端自動化構建 2017-07-11
- webpack的Hot Module Replacement運行機制 2017-07-10
- 前后端分離之vue2.0+webpack2 實戰(zhàn)項目 -- webpack介紹 2017-06-30
- webpack入門 2017-06-27
- 使用可視化圖表對 Webpack 2 的編譯與打包進行統(tǒng)計分析 2017-06-22
【前端】一步一步使用webpack+react+scss腳手架重構項目