Webpack入门教程三十一

最新推荐文章于 2025-12-17 23:31:04 发布

转载最新推荐文章于 2025-12-17 23:31:04 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/suyanzhu/1900431

文章标签：

#webpack #ViewUI

本文介绍了一个具体的Webpack配置案例，包括如何加载处理JS、CSS、LESS、SCSS、HTML、模板文件及图片资源。通过详细的配置代码展示了不同类型的文件如何被正确地引入到项目中，并确保最终构建出的文件符合预期。

141.webpack的css,less,scss,html,tpl,,js图片等模块使用,webpack.config.js配置内容如下

var htmlWebpackPlugin = require("html-webpack-plugin");
var path = require("path");
var webpack = require("webpack");

module.exports = {
	context:__dirname,
	entry:{
		main:'./src/app.js'
	},
	output:{
		path:'./dist',
		filename:'js/[name].bundle.js'
	},
	module:{
		loaders:[
			{
				test:/\.js$/,
				loader:'babel-loader',
				exclude:path.resolve(__dirname,'./node_modules/'),
				include:path.resolve(__dirname,'src'),
				query:{
					presets:['latest']
				}
			},
			{
				test:/\.css$/,
				loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
			},
			{
				test:/\.less$/,
				loader:'style-loader!css-loader!postcss-loader!less-loader'
			},
			{
				test:/\.scss$/,
				loader:'style-loader!css-loader!postcss-loader!sass-loader'
			},
			{
				test:/\.html$/,
				loader:'html-loader'	
			},
			{
				test:/\.tpl$/,
				loader:'ejs-loader'
			},
			{
				test:/\.(png|jpg|gif|svg)$/i,
				loader:'file-loader'
			}
		]
	},
	plugins:[
		new htmlWebpackPlugin({
			filename:'index.html',
			template:'index.html',
			inject:'body'
		}),
		new webpack.LoaderOptionsPlugin({
			options:{
				postcss:function(){
					return [require('autoprefixer')];
				}
			}
		})
	],

}