react本地开发者预览打包--webpack

最新推荐文章于 2024-08-08 08:14:54 发布

lydia_liuY

最新推荐文章于 2024-08-08 08:14:54 发布

阅读量728

点赞数

分类专栏： webpack 文章标签： react webpack less

本文链接：https://blog.csdn.net/lydia_liuY/article/details/80497603

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

let path = require('path');
let webpack = require('webpack');
let htmlWebpackPlugin = require('html-webpack-plugin');
let openBrowserPlugin = require('open-browser-webpack-plugin');


module.exports = {
	entry:path.resolve(__dirname,'./app/index.jsx'),
	output:{
		filename:'bundle.js'
	},
	module:{
		rules:[ 
			{
				test:/\.(js|jsx)$/,
				exclude:/node_modules/,
				loader:'babel-loader',
			},
			// 不使用extract-text-webpack-plugin将css分离
			{
				test:/\.less$/i,
				exclude:/node_modules/,
				use:[
					'style-loader',
					{
						loader:'css-loader',
						options:{
							importLoaders:1
						}
					},
					{
						loader:'postcss-loader',
						options:{
							plugins:[
								require('autoprefixer')({
									broswers:['last 5 versions']
								})
							]
						}
					},
					{
						loader:'less-loader'
					}
				]
			},
			{
				test:/\.css$/,
				exclude:/node_modules/,
				use:[
					'style-loader',
					{
						loader:'css-loader',
						options:{
							importLoaders:1,
						}
					},
					{
						loader:'postcss-loader',
						options:{
							plugins:[
								require('autoprefixer')({
									broswers:['last 5 versions']
								})
							]
						}
					}
				]
			},
			
			{
				test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i,
				use:[
					{
						loader:'url-loader',
						options:{
							limit:5000,
							name:path.posix.join('assets','img/[name].[ext]')
						}
					}
				]
			},
			{
				test:/\.(png|jpg|gif|jpeg|bmp)$/i,
				exclude:/node_modules/,
				use:[
					{
						loader:'file-loader',
						options:{
							name:path.posix.join('assets','img/[name].[ext]')
						}
					}
				]
			}
		]
	},
	resolve:{
		extensions:['.js','.json','.less','.css','.jsx'],
		alias:{}
	},
	plugins:[
		// 对html进行打包
		new htmlWebpackPlugin({
			template:'./app/index.html',
			inject:'body'
		}),
		// 打开浏览器
		new openBrowserPlugin({
			url:'http://localhost:3000'
		}),
		// 判断是否是开发环境
		new webpack.DefinePlugin({
			__DEV__:JSON.stringify(JSON.parse((process.env.NODE_DEV == 'dev') || 'false'))
		})
	],
	devServer: {
		proxy:{
			'/api':{
				target:'http://localhost:4000',
				secure:false
			}
		},
		contentBase: path.join(__dirname, "app"),//告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先。
  		compress: true,//一切服务都启用gzip 压缩：
  		port: 3000,
        historyApiFallback: true, //不跳转，在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        inline: true, //实时刷新
    }
}