webpack.config.js

最新推荐文章于 2023-12-21 22:27:37 发布

原创最新推荐文章于 2023-12-21 22:27:37 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个实际的Webpack配置案例，展示了如何使用Webpack进行模块打包、资源加载、代码压缩等操作，并利用Webpack插件实现CSS文件提取、HTML文件自动生成等功能。

var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
/*
 * extract css
 * （提取css文件）
 * */
var ExtractTextPlugin = require("extract-text-webpack-plugin");
/*
 * create html
 * （创建html文件）
 * */
var HtmlWebpackPlugin = require('html-webpack-plugin');
/*
 * clean publishing directory
 * （清空发布目录）
 * */
var CleanPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

//webpack --config 文件名.js -w        /*执行另一个配置文件*/
var config = {
	entry: {
		index: './js/main.js'
	},
	output: {
		path: './build/',
		filename: 'js/[name].[chunkhash].js',
		chunkFilename: '[id].[chunkhash].js'
	},
	devServer: {
        historyApiFallback: true,
        hot: false,
        inline: true,
        grogress: true
    },
	module: {
		loaders: [
			// { test: /\.css$/, loader: 'style-loader!css-loader' },
			{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
			{test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},
			{test: /\.js$/, loader:"babel",query:{presets:["es2015","stage-0","react"]}},
			{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
		]
	},
	plugins: [
		new CleanPlugin(['./build/*']),
		new CopyWebpackPlugin([
			{from: './images', to: 'images'},
			{from: './less', to: 'less'},			
		]),
		// 公共CSS名字和路径
		new ExtractTextPlugin("css/[name].[chunkhash].css"),
		// 把公共文件提取出来
		new webpack.optimize.CommonsChunkPlugin({
			name: 'vendor',
			minChunks: function (module, count) {
				// any required modules inside node_modules are extracted to vendor
				return (
					module.resource &&
					/\.js$/.test(module.resource) &&
					module.resource.indexOf(
						path.join(__dirname, './node_modules')
					) === 0
				)
			}
		}),
		//压缩代码
		// new webpack.optimize.UglifyJsPlugin({
		// 	compress: {
		// 		warnings: false
		// 	}
		// }),
		new webpack.ProvidePlugin({// 全局依赖jQuery,不需要import了
			$: "jquery",
			jQuery: "jquery",
			"window.jQuery": "jquery"
		})
	]
};


module.exports = config;

var pages = Object.keys(getEntry('./*.html'));
//生成HTML模板
pages.forEach(function (pathname) {
	var conf = {
		filename: pathname + '.html', //生成的html存放路径,相对于path
		template: './' + pathname + '.html', //html模板路径
		inject: true, //允许插件修改哪些内容,包括head与body
		hash: false, //是否添加hash值
		minify: { //压缩HTML文件
			removeComments: true,//移除HTML中的注释
			collapseWhitespace: true //删除空白符与换行符
		},
		chunksSortMode: 'dependency',
		chunks: [pathname,"vendor"]
	};

	config.plugins.push(new HtmlWebpackPlugin(conf));
});

//按文件名来获取入口文件(即需要生成的模板文件数量)
function getEntry(globPath) {
	var files = glob.sync(globPath);
	var entries = {},
		entry, dirname, basename, pathname, extname;
	for (var i = 0; i < files.length; i++) {
		entry = files[i];
		dirname = path.dirname(entry);
		extname = path.extname(entry);
		basename = path.basename(entry, extname);
		pathname = path.join(dirname, basename);
		entries[pathname] = entry;
	}
	return entries;
}