小編給大家分享一下基于webpack2如何實現(xiàn)的多入口項目腳手架，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網(wǎng)站建設服務10余年為成都成都混凝土攪拌機小微創(chuàng)業(yè)公司專業(yè)提供成都定制網(wǎng)頁設計營銷網(wǎng)站建設商城網(wǎng)站建設手機網(wǎng)站建設小程序網(wǎng)站建設網(wǎng)站改版，從內(nèi)容策劃、視覺設計、底層架構、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設服務。

簡介

基于 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 轉碼功能， 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 轉 ES5，less 轉 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

http://localhost:8080/view

構建

cross-env 實現(xiàn)區(qū)分開發(fā)和生產(chǎn)環(huán)境構建

命令 說明

npm run dev 開發(fā)環(huán)境構建，不壓縮代碼

npm run build 生產(chǎn)環(huán)境構建，壓縮代碼

看完了這篇文章，相信你對“基于webpack2如何實現(xiàn)的多入口項目腳手架”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享名稱：基于webpack2如何實現(xiàn)的多入口項目腳手架
分享地址：http://chinadenli.net/article4/jhpcoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、用戶體驗、自適應網(wǎng)站、網(wǎng)站建設、網(wǎng)站設計、網(wǎng)頁設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)