vue-cli的webpack配置，迁移适用到react开发配置webpack

清风笑～

已于 2022-11-15 10:24:42 修改

阅读量2.1k

点赞数

分类专栏： js前端 react es6 文章标签： webpack react.js vue.js

于 2017-10-26 22:44:45 首次发布

本文链接：https://blog.csdn.net/ling369523246/article/details/78359645

版权

本文介绍如何将vue-cli的webpack配置应用于react项目。通过修改webpack.base.conf.js、util.js、webpack.prod.conf.js、webpack.dev.conf.js以及config.index.js等文件，实现react项目的配置优化。此外，还涉及了index.html改用index.ejs，目录结构调整，以及webpack打包分析。文章提到是否使用babel-runtime需考虑，并给出了修改后的package.json依赖。

摘要由CSDN通过智能技术生成

最近搞vue，用的vue-cli，快速构建开发环境，当然核心还是集成的webpack。之前自己做react的webpack环境配置总觉得差强人意，于是就把vue-cli的迁移过来，感觉还是不错的。对应一般开发需要，下面需要修改的就在build和config目录下的几个文件中

从webpack.base.conf.js 文件开始，无论生产环境还是开发环境都以这个为基础的，

module.exports = {
	entry: {
		app: ['./src/js/index.js'],	//入口文件
		babel: ['babel-polyfill'] //babel-polyfill 和redux 单独打包减小app.js 的打包体积 用于配合externals
		redux: ['redux', 'react-redux'],
	},
	output: {
		path: config.build.assetsRoot,
		filename: '[name].js',
		publicPath: process.env.NODE_ENV === 'production'
			? config.build.assetsPublicPath
			: config.dev.assetsPublicPath,
		libraryTarget: 'umd'	//用于外部引入的 react.js 等
	},
	resolve: {
		extensions: ['.js', '.json'],
		symlinks: false
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				loader: 'babel-loader',
				include: [resolve('src'), resolve('test')],
				exclude:[resolve('node_modules')], 	//在node_modules的文件不被babel理会
				query: {
                    presets: ['react', 'stage-2']
                }
			},
			{
				test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
				loader: 'url-loader',
				options: {
					limit: 10000,
					name: utils.assetsPath('img/[name].[hash:7].[ext]'),
				}
			},
			{
				test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
				loader: 'url-loader',
				options: {
					limit: 10000,
					name: utils.assetsPath('media/[name].[hash:7].[ext]')
				}
			},
			{
				test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
				loader: 'url-loader',
				options: {
					limit: 10000,
					name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
				}
			},
			// {
            //     test: /\.less$/, 
            //     use: ExtractTextPlugin.extract({ use: extractCssLoaders, fallback: 'style-loader' }),
            // }
		]
	},
	// 配置全局使用
	plugins: [
		new webpack.ProvidePlugin({
			"React": "react",
			"ReactDOM": "react-dom",
			"_": "lodash",
			"classnames":"classnames"
		}),
		//extrac