Webpack + React ---环境配置

• 本文将会用到包管理工具npm
• webpack 4.x中，“约定大于配置”，默认入口文件是src->index.js,默认打包输出文件是dist->main.js

创建项目

1. npm init -y快速初始化一个项目

会生成一个package.json文件,里面会放一些依赖文件

image.png

• name：包名字
• version：包版本
• main：入口文件

2.新建src和dist目录，并在src目录下创建index.html和index.js文件

3.安装Webpack

npm i webpack webpack-cli -D

4.在项目根目录下新建webpack.config.js文件，可以向外暴露一个打包的配置对象

module.exports = {
    mode: 'development', // development(开发环境) production(产品环境，自动生成压缩文件)
};

5.在package.json中的scripts中加上"webpack":"webpack",再运行npm run webpac

托管main.js

1.npm install webpack-dev-server -D安装webpack-dev-server，并在 packag.json里面的scripts加入"dev":"webpack-dev-server"

• --open是直接打开默认浏览器，--open firefox打开火狐
• --port 8080定义端口号
• --hot定义热更新
• --host定义域名(使用本地Ip，或者不指定)

2.使用npm run dev，此时会直接打开浏览器，但是会发现在项目根目录下找不到，这是因为打包的文件托管到了内存

托管首页

配置插件

npm install html-webpack-plugin -D，并改变webpack.config.js

image.png