欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React小项目,webpack入门讲解

程序员文章站 2022-04-19 19:19:59
新建一个名为ReactProject文件夹,进入后执行: npm init //使用init命令来初始化一个package.json文件执行: npm install...

新建一个名为ReactProject文件夹,进入后执行:

npm init

//使用init命令来初始化一个package.json文件执行:

npm install web pack --save-dev

//安装webpack在项目根路径下新建名为webpack.config.js文件并进行配置

const path = require('path');

//入口文件配置
let entry = {
	index: './public/javascripts/index_entry.js'
};

//浏览器端配置
let browserConfig = {
	entry,
	output: {
		//输出的路径
		path: path.join(__dirname, 'build'),
		publicPath: 'build',
		//输出的文件名称
		filename: 'js/[name].bundle.js',
		chunkFilename: 'js/[id].bundle.js'
	},
	module: {

	},
	plugins: [
	]
};

module.exports = [browserConfig];

在项目根路径下新建名为build文件夹,用于存放编译打包后的文件

在项目根路径下新建名为public文件夹,用于存放公共文件,如图片,css文件,js文件

React小项目,webpack入门讲解

然后执行webpack进行打包,会提示以下错误:webpack command is not found

在package.json下,增加一条命令:

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "webpack"
},

在终端下,执行npm start,开始编译,会出现提示:

sh-3.2# npm start

> reactproject@1.0.0 start /Users/zhaoshanshan/work/ReactProject

> webpack

The CLI moved into a separate package: webpack-cli

Would you like to install webpack-cli (That will run npm install -D webpack-cli) (yes/NO)

输入yes,安装webpack-cli,然后即可以看到打包效果。

上一篇: 有点迷茫

下一篇: HashMap源码学习