問(wèn)題描述

文件結(jié)構(gòu)：

/ 2017-04-13 webpack_Demo /

var webpack = require(’webpack’); var path = require(’path’); var glob = require(’glob’); var HtmlWebpackPlugin = require(’html-webpack-plugin’); var Merge = require(’webpack-merge’); var ExtractTextPlugin = require(’extract-text-webpack-plugin’); var public_PATHS = {node_modules_Path: path.resolve(’./node_modules’),public_resource_Path: path.resolve(process.cwd(), ’./src/public_resource’),vendor_Path: path.resolve(process.cwd(), ’./src/vendor’) };var file_js = getEntry(’./src/pages/**/*.js’,’./src/pages/’); var file_styles = getEntry(’./src/pages/**/*.?(css|less)’,’./src/pages/’); var file_html = getEntry(’./src/pages/**/*.html’,’./src/pages/’); var pages = Object.keys(file_html); //get file_html keyval //console.log(pages); var common_js =getEntry(’./src/vendor/js/*.js’,’./src/vendor/’); var entry_config = Object.assign(file_js,{common: [ ’jquery’,’avalon’,’lodash’,’mmRouter’] }); //common console.log(entry_config);var output_config = {path: __dirname+’/build/pages’,filename: ’[name]-[hash].js’ };var module_config ={loaders: [ //css 文件使用 style-loader 和 css-loader 來(lái)處理 { test:/.css$/, loader:’style-loader!css-loader’ }, //在webpack的module部分的loaders里進(jìn)行配置即可 { test: /.js$/,exclude: [ path.resolve(__dirname, ’./src/pages’), path.resolve(__dirname, ’./node_modules’) ],include:path.resolve(__dirname, ’./src/pages’),loader: ’babel’,query: {presets: [’es2015’]} }] }var plugins_config = [//warming: this is a Array multips pages web_application need to push htmlwebpackplugin_config_Arraynew webpack.ProvidePlugin({ $: ’jquery’, jQuery: ’jquery’, ’window.jQuery’: ’jquery’, ’window.$’: ’jquery’, }), new webpack.optimize.CommonsChunkPlugin({ name: ’common’, filename: './common/common.js'}),//new ExtractTextPlugin('avalon_demo.css'), ];pages.forEach(function(pathname) {var conf = { filename: __dirname+’/build/pages/’ + pathname + ’.html’, //生成的html存放路徑，相對(duì)于path template: path.resolve(__dirname, ’./src/pages/’ + pathname + ’.html’), //html模板路徑 //path.resolve(process.cwd(), ’./src/page’), inject: ’head’, chunks:{ } };plugins_config.push(new HtmlWebpackPlugin(conf)); }); var resolve_config = {extensions: [’.js’, ’.css’, ’.less’, ’.ejs’, ’.png’, ’.jpg’,’.gif’,’.html’], //自動(dòng)擴(kuò)展文件后綴名，意味著我們r(jià)equire模塊可以省略不寫后綴名alias: { jquery: path.join(public_PATHS.vendor_Path, 'js/jquery-1.10.2.min.js'), avalon: path.join(public_PATHS.vendor_Path, 'js/avalon.js'), mmRouter: path.join(public_PATHS.vendor_Path, 'js/mmRouter.js'), lodash: path.join(public_PATHS.vendor_Path, 'js/lodash.min.js') } //模塊別名定義，方便后續(xù)直接引用別名，無(wú)須多寫長(zhǎng)長(zhǎng)的地址 //root:public_PATHS };var webpack_config = {entry:entry_config,output: output_config,module:module_config,plugins:plugins_config,resolve:resolve_config }; module.exports = webpack_config;//common function///** * 獲得路徑 * @param globPath: str * @param pathDir: str 對(duì)比路徑 * @returns obj */ function getEntry(globPath, pathDir) {//get from github code var files = glob.sync(globPath);var entries = {}, entry,//文件 dirname, // basename, //文件名 pathname, // extname; //文件擴(kuò)展名 for (var i = 0; i < files.length; i++) { entry = files[i]; dirname = path.dirname(entry); //返回路徑中代表文件夾的部分 //console.log('dirname返回路徑中代表文件夾的部分:==>'+dirname); extname = path.extname(entry); //返回路徑中文件的后綴名，即路徑中最后一個(gè)’.’之后的部分。如果一個(gè)路徑中并不包含’.’或該路徑只包含一個(gè)’.’ 且這個(gè)’.’為路徑的第一個(gè)字符，則此命令返回空字符串。 //console.log('extname返回路徑中文件的后綴名:==>'+extname); basename = path.basename(entry, extname); //返回路徑中的最后一部分 //console.log('basename返回路徑中的最后一部分:==>'+basename); pathname = path.normalize(path.join(dirname, basename)); //規(guī)范化路徑 //console.log('pathname規(guī)范化路徑:==>'+pathname); pathDir = path.normalize(pathDir); //規(guī)范化路徑 //console.log('pathDir規(guī)范化路徑:==>'+pathDir); if(pathname.startsWith(pathDir)){pathname = pathname.substring(pathDir.length);//console.log('pathname判斷后:==>'+pathname); }; entries[pathname] = ’./’ + entry;}//console.log(entries);return entries; } /* build dev-server */var npm_run_type = process.env.npm_lifecycle_event; //get npm run type string //console.log('npm_run_type==>'+npm_run_type);var debug, // is debugdevServer, // is hrm modeminimize; // is minimizeif (npm_run_type == 'build') { // online mode （線上模式）debug = false, devServer = false,minimize = true; }else if (npm_run_type == 'build-dev') { // dev mode （開(kāi)發(fā)模式）debug = true,devServer = false,minimize = false; } else if (npm_run_type == 'dev-hrm') { // dev HRM mode （熱更新模式）debug = true,devServer = true,minimize = false; }; /* * Hrm setting * （開(kāi)啟熱更新，并自動(dòng)打開(kāi)瀏覽器） * */ if (devServer) {console.log('port:'+devServer);var webpackHot=’webpack/hot/dev-server’;config = Merge( config, {plugins: [ // Enable multi-pass compilation for enhanced performance // in larger projects. Good default. new webpack.HotModuleReplacementPlugin({multiStep: true })],devServer: { contentBase: __dirname+’/src/’, // Enable history API fallback so HTML5 History API based // routing works. This is a good default that will come // in handy in more complicated setups. historyApiFallback: true,// Unlike the cli flag, this doesn’t set // HotModuleReplacementPlugin! hot: true, inline: true,// Display only errors to reduce the amount of output. stats: ’errors-only’,host: pkg.configs.devHost, port: pkg.configs.devPort } }); }//avalon_demo.js import ’./avalon_demo.css’; import username from ’./moudle.js’; console.log(username);//moudle.js import ’babel-polyfill’; export default username='stringtest';

json

{ 'name': 'webpack_demo', 'version': '1.0.0', 'description': '', 'main': 'index.js', 'scripts': { 'test': 'echo 'Error: no test specified' && exit 1', 'start': 'webpack' }, 'author': '', 'license': 'ISC', 'devDependencies': { 'babel-cli': '^6.24.1', 'babel-core': '^6.24.1', 'babel-loader': '^6.4.1', 'babel-polyfill': '^6.23.0', 'babel-preset-env': '^1.4.0', 'babel-preset-es2015': '^6.24.1', 'css-loader': '^0.28.0', 'ejs-loader': '^0.3.0', 'extract-text-webpack-plugin': '^2.1.0', 'file-loader': '^0.11.1', 'glob': '^7.1.1', 'html-loader': '^0.4.5', 'html-webpack-plugin': '^2.28.0', 'image-webpack-loader': '^3.3.0', 'jsx-loader': '^0.13.2', 'postcss-loader': '^1.3.3', 'style-loader': '^0.16.1', 'webpack': '^2.4.1', 'webpack-merge': '^4.1.0' }}

問(wèn)題說(shuō)明 ：項(xiàng)目為多入口多輸出的應(yīng)用 ，獨(dú)立合并了jquery,avalon等插件為common.js，其他單獨(dú)輸出，現(xiàn)在需要babel：es6--轉(zhuǎn)es5，但是轉(zhuǎn)完之后沒(méi)有報(bào)錯(cuò) 但是瀏覽器不能渲染。moudle的代碼被混在了common中， 整個(gè)demo chrome 不能解析

現(xiàn)在情況是，我的期望是jQuery四個(gè)文件獨(dú)立為common，但是我在avalon_demo.js中import其他文件moudle.js，按我的想法生成后可能會(huì)把moudle和avalon_demo打包，而實(shí)際情況是moudle的代碼在common中，在瀏覽器中找不到export的值。我不知道哪里出了問(wèn)題，哪位大哥大姐能幫幫忙啊。我在這測(cè)了好幾個(gè)小時(shí)了

問(wèn)題解答

path.resolve(__dirname, ’./src/pages’)這個(gè)又exclude又include是干啥？ 沒(méi)提供依賴無(wú)法具體幫你測(cè)試原因，不過(guò)可以試試用babel-preset-env替代babel-preset-es2015，最好弄個(gè).babelrc放在外面寫babel的配置項(xiàng)

new webpack.optimize.CommonsChunkPlugin({name: ’common’,filename: './common/common.js',minChunks: Infinity //僅僅創(chuàng)建公共組件塊，不會(huì)把任何modules打包進(jìn)去。并且提供function，以便于自定義邏輯。 })

問(wèn)題解決 就是添加了minChunks: Infinity 參數(shù) ，和babel配置沒(méi)關(guān)系，問(wèn)的題目有一點(diǎn)問(wèn)題，我把網(wǎng)上轉(zhuǎn)的api翻譯留在這把，謝謝樓上的兄弟

ptions.name or options.names(string|string[]): 公共模塊的名稱options.filename (string): 公開(kāi)模塊的文件名（生成的文件名）options.minChunks (number|Infinity|function(module,count) - boolean): 為number表示需要被多少個(gè)entries依賴才會(huì)被打包到公共代碼庫(kù)；為Infinity 僅僅創(chuàng)建公共組件塊，不會(huì)把任何modules打包進(jìn)去。并且提供function，以便于自定義邏輯。options.chunks(string[]):只對(duì)該chunks中的代碼進(jìn)行提取。options.children(boolean):如果為true,那么公共組件的所有子依賴都將被選擇進(jìn)來(lái)options.async(boolean|string):如果為true,將創(chuàng)建一個(gè) option.name的子chunks（options.chunks的同級(jí)chunks） 異步common chunkoptions.minSize(number):所有公共module的size 要大于number，才會(huì)創(chuàng)建common chunk

轉(zhuǎn)自：http://www.cnblogs.com/sloong...