/*** webpack打包JS配置* 添加eot/woff/ttf/svg* 把resposive直接打包到vendor,頁面無需引入
* 添加環境判斷&動態獲取publicPath* @authors Jean Chueng (jean0920@163.com)* @date 2016-08-08 10:41:31* @version v1.0.2*/ /****初始設置****/ // 判斷開發環境||生產環境||測試環境 var isProduction = function() {return process.env.NODE_ENV === 'test'||process.env.NODE_ENV ==='production'; }; var isHot = function() {return process.env.NODE_ENV === 'hotdev'; };// 服務器地址 var server = "http://common.statics.qq.tt:8080";// 輸出環境: '/dev/'表示開發環境;'/dist/'表示生產環境 var sEnvironment = function() {switch(process.env.NODE_ENV){case 'test':return '/test/';case 'production':return '/dist/';default:return '/dev/';} };// 運行終端: 'mobile/'表示微信端;'basic/'表示PC端 var sSystem = 'mobile/';// 業務模塊名: * 為遍歷所有業務功能模塊 var sFunName = '*'; /****End 初始設置****/var webpack = require('webpack'),path = require('path'),glob = require('glob'),precss = require('precss'),autoprefixer = require('autoprefixer'),ExtractTextPlugin = require('extract-text-webpack-plugin');/**-------------------------------------------* 獲取多頁面的每個入口文件，用于配置中的entry---------------------------------------------*/ function getEntry() {var entry = {};var nLength = sSystem.length - 1;//首先我們先讀取我們的開發目錄 需求功能member 手機端為mobile PC端為basicvar srcDirName = './src/'+sSystem+sFunName+'/*/*.js';glob.sync(srcDirName).forEach(function (name) {var n = name.slice(name.lastIndexOf(sSystem) + nLength, name.length - 3);n = n.slice(0, n.lastIndexOf('/'));//接著我對路徑字符串進行了一些裁剪成想要的路徑entry[n] = name;entry['vendor/vendor']=['./src/mobile/common/resposive','./src/mobile/common/common'];});console.log('是否壓縮文件：'+isProduction());console.log('輸出路徑：'+sEnvironment()+sSystem);return entry; } /**---------* 定義插件-----------*/ var plugins = [//提供全局的變量，在模塊中使用無需用require引入new webpack.ProvidePlugin({jQuery: "jquery",$: "jquery","window.jQuery": "jquery"}),//提取公共模塊new webpack.optimize.CommonsChunkPlugin({name:'vendor/vendor',filename:'[name].min.js',minChunks: 10,}),//單獨打包cssnew ExtractTextPlugin('[name].min.css'), ]; if( isProduction() ){plugins.push(//文件壓縮/混淆new webpack.optimize.UglifyJsPlugin({compress: {warnings: false},mangle: {except: ['$', 'webpackJsonpCallback']}})); }/**--------------* webpack參數----------------*/ module.exports = {entry: getEntry(),//入口文件 output: {//輸出路徑 終端不同時輸出路徑不同 手機端為mobile PC端為basicpath: path.join(__dirname,sEnvironment()+sSystem),filename:'[name].min.js',publicPath:isHot()?(server+sEnvironment()+sSystem):'../',chunkFilename: '[name].[chunkhash:8].js'},resolve: {extensions: ['', '.js', '.json', '.css'],//自動擴展文件后綴 alias:{'layer' : path.join(__dirname,'src/libs/layer_mobile/layer'),'layercss' : path.join(__dirname,'src/libs/layer_mobile/need/layer'),'Validform' : path.join(__dirname,'src/libs/Validform_v5.3.2'),'swiper' : path.join(__dirname,'src/libs/swiper/swiper.jquery.js')}},module: {loaders:[{ test: /\.css$/, loader:ExtractTextPlugin.extract('style','css?root=./dist/mobile?sourceMap!postcss-loader?')},{ test: /\.(png|jpe?g|gif|svg)$/, loader: 'url?limit=8192&name=images/[name].[ext]'},{ test: /\.(eot|ttf|woff)$/i, loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]'},]},postcss: function(){return [precss,autoprefixer({ browsers: '>5%' })];},externals:{jquery:'jQuery',},plugins: plugins,devtool: isProduction()?null:'source-map', };

?

轉載于:https://www.cnblogs.com/jeanchueng/p/5691268.html

總結

以上是生活随笔為你收集整理的webpack开发配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。