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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react环境搭建及文件配置的更多相关文章

  1. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  2. React 环境搭建及页面调试方法

    React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...

  3. 关于路由器漏洞利用,qemu环境搭建,网络配置的总结

    FAT 搭建的坑 1 先按照官方步骤进行,完成后进行如下步骤 2 修改 move /firmadyne into /firmware-analysis-toolkit navigate to the ...

  4. 20201205-3 HTML环境搭建与文件基本结构

      HTML环境搭建与文件基本结构   HTML的基础 HTML环境搭建 Pycharm 包含全部环境  编写(代码) →  运行浏览器 → 代码检查 Sublime  只是用来编写 HTML 代码: ...

  5. 最小白的webpack+react环境搭建

    本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...

  6. 从零开始react实战:云书签-1 react环境搭建

    总览篇:react 实战之云书签 本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制 支持 l ...

  7. hadoop集群环境搭建之安装配置hadoop集群

    在安装hadoop集群之前,需要先进行zookeeper的安装,请参照hadoop集群环境搭建之zookeeper集群的安装部署 1 将hadoop安装包解压到 /itcast/  (如果没有这个目录 ...

  8. hadoop学习第一天-hadoop初步环境搭建&伪分布式计算配置(详细)

    一.虚拟机环境搭建 我们用的虚拟机为vmware,Linux镜像为centOS6.5. vmware安装 安装没什么多说的,一路下一步,但是在新建虚拟机的时候有两个地方需要注意: 1.分配处理器1个就 ...

  9. PHP LAMP环境搭建及网站配置流程(完整版)

    心血来潮想做一个自己的博客网站,写一些文章做技术分享,平时遇到的一些问题的解决办法都记录下来,网站搭建成功,那么第一篇博客自然就是整个网站的搭建以及域名的注册.备案.解析流程,总共分为以下几步: 1. ...

随机推荐

  1. OpenWrt 20.02.2 小米路由器3G配置CP1025网络打印

    家里的施乐 CP116w 工作快五年了终于罢工了. 黑粉报错, 自己也不会拆, 只能搁置了. 后来换了个 HP CP1025. 这个打印机也不错, 墨盒便宜没什么废粉, 就是启动慢一点, 而且 -- ...

  2. 行列式&矩阵树定理

    行列式: 参考 oi-wiki 定义 对于一个\(n*n\)的矩阵A行列式取值(标量) \(det(A)=|A|=\sum\limits_p(-1)^{\tau(p)}\prod\limits_{i= ...

  3. Spring-Cloud-Alibaba系列教程(一)Nacos初识

    前言 在2020年即将开启SpringCloudAlibaba的专题,希望2020年共同学习进步. 学习资料 文档 Naco文档 程序猿DD Spring Cloud Aliabab专题 专题博客 视 ...

  4. Xmind演讲主题大纲

    参考:https://www.bilibili.com/video/BV1Rb411s7VG?p=9

  5. DAST 黑盒漏洞扫描器 第三篇:无害化

    0X01 前言 甲方扫描器其中一个很重要的功能重点,就是无害化,目的是尽量降低业务影响到可接受程度. 做过甲方扫描器,基本上对于反馈都有所熟悉. "我们的服务有大量报错,请问和你们有关么&q ...

  6. 【Redis】skiplist跳跃表

    有序集合Sorted Set zadd zadd用于向集合中添加元素并且可以设置分值,比如添加三门编程语言,分值分别为1.2.3: 127.0.0.1:6379> zadd language 1 ...

  7. ACM-01背包问题-Python

    日后完善 二维数组实现 if __name__ == '__main__': # 背包空间 space = 10 # 默认第一个元素为 0, 仅仅是为了方便理解 weights = [0, 2, 2, ...

  8. SAP FPM 相关包 APB_FPM_CORE

    related interface: APB_FPM_COREAPB_FPM_CORE_4_EXT_SCAPB_FPM_CORE_INTERNALAPB_FPM_CORE_RESTRICTED

  9. 合宙Air32F103CBT6开发板上手报告

    2022年6月初合宙新上市了 Air32F103 系列 MCU, 市面上 STM32F103 的克隆军队又增加了新的一员. 这次不知道是哪家的贴牌, 分 Air32F103CBT6 和 Air32F1 ...

  10. VisionPro · C# · 界面显示视觉结果图像

    程序界面通过 CogRecordDisplay 控件显示视觉运行结果图像. 按指定图像显示,代码如下: using System; using System.Windows.Forms; using ...