react环境搭建及文件配置

webpack简介

构建工具（基于Nodejs）node(v16)前端工程化。

环境搭建

创建一个空的package.json

npm init

webpack核心包（提供了API,插件）

npm i webpack -g
npm i webpack -D

cnpm i webpack -g
cnpm i webpack -D

webpack命令行包（提供了很多命令）

npm i webpack-cli -g
npm i webpack-cli -D

cnpm i webpack-cli -g
cnpm i webpack-cli -D

官方推荐的用于构建本地服务器的包

npm i webpack-dev-server -g
npm i webpack-dev-server -D

cnpm i webpack-dev-server -g
cnpm i webpack-dev-server -D

判断webpack是否安装成功

webpack -v

 

 

webpack是基于NodeJs环境的，webpack工作

• • 官方推荐使用的配置文件:webpack.config.js
  • 在项目根目录创建src/main.js入口文件

 

 webpack.config.js配置文件

//从Node中引入path模块，path.resolve()/join()
const file = require('path)

　const HtmlWebpackPlugin = require('html-webpack-plugin')

　const { ProgressPlugin} = require('webpack')

module.exports{
//指定webpack工作模式(两种模式：开发模式(development)，打包模式(production))
　　mode:'development',
　　//入口配置
　　//entry:'./src/main.js'　　//相对路径
　　//entry:path,resolve(__dirname,'src/main.js')　　//绝对路径
　　entry:{
　　　　app:file.resolve(__dirname,'src/main.js')
　　},
　　//出口配置
　　output:{
　　　　//指定打包结果的输出目录，默认是dist目录，只能使用绝对路径
　　　　path:path.resolve(__dirname,'dist')，
　　　　filename:'[name].[chunkhash:8].js'
　　　　//每次打包时，
　　　　clean:true
　　}，

　　//本地服务配置

    devServer:{

        port:8088,　　

        open:true   //项目启动成功，自动打开浏览器

    }

　　plugins:[
　　　　new HtmlWebpackPlugin({
　　　　　　template:file.resolve(__dirname,'../','public/index.html'),
　　　　　　//把js脚本注入在body前
　　　　　　inject:'body',
　　　　　　//指定打包成功后模板的名字
　　　　　　filename:'index.html',
　　　　　　//指定index.html的标题
　　　　　　title:'沐沐',
　　　　　　//指定图标路径
　　　　　　favicon:file.resolve(__dirname,'../','public/index.html'),
　　　　}),

  　　　　new ProgressPlugin({

　　　　　　　　handler(percentage,message,...args){

　　　　　　　　　　if(percentage == 1){

　　　　　　　　　　　　console.log('100% 启动成功')

　　　　　　　　　　}

　　　　　　　　}

　　　　　}),

　　],
　　module:{
　　　　//定义模块编译规则和方法
　　　　rules:[
　　　　　　//当webpack工作时，遇到.js结尾的文件时，就使用babel-loader进行加载，交给@babel/*进行编译。得到es5代码。
　　　　　　{test:/\.js$/,use:'babel-loader'}
　　　　]
　　}
}

 注意：因为webpack有两种工作模式，为了让配置更加容易维护，所以我们分离环境。

 在 webpack --env 指定环境，在配置文件 module.exports = function(env) 接收环境变量。

对 webpack配置进行拆分（公共配置、开发环境配置、打包配置），再使用 webpack-merge合并配置

 

const { merge } = require('webpack-merge')

const config = require('./config/config')    //公共配置
const serve = require('./config/serve')    //开发环境配置
const build = require('./config/build')　　//打包配置

module.exports = function ( {development} ) {
  return merge(config, development ? serve : build)
}

在webpack中，如何处理.js模块？

安装babel-loader,在公共配置中配置module

npm i babel-loader -D