欢迎来到沐沐的博客

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
posted @ 2022-08-08 22:00  前端小二&沐沐  阅读(508)  评论(0编辑  收藏  举报