webpack4大大提高了开发效率,简化了配置复杂度,作为一个大的版本更新,作为一个对开发效率执着的爱折腾的程序员,已经忍不住要尝尝鲜了

首先是cli和webpack的分离,开发webpack应用程序需要安装一些开发依赖

webpack

webpack-cli

webpack-dev-server

babel-loader, babel-core, babel-preset-env, babel-preset-react

css-loader less-loader style-loader less ( 如果是sass的话安装 sass-loader和node-sass )

file-loader

  1. yarn add webpack webpack-cli webpack-dev-server less less-loader style-loader css-loader babel-loader babel-core babel-preset-react babel-preset-env file-loader --save --dev

安装好之后开始配置webpack

mode

4.0版本添加了一个mode参数

development 或者 production,直接设置这两个参数,可以省去配置一些插件,但是也可以设置为 none,插件也可以自己手动配置

如果是development的话,相当于旧版本的

  1. plugins: [
  2. new webpack.NamedModulesPlugin(),
  3. new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("development") }),
  4. ]

如果是production 的话,相当于旧版本的

  1. plugins: [
  2. new UglifyJsPlugin(/* ... */),
  3. new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("production") }),
  4. new webpack.optimize.ModuleConcatenationPlugin(),
  5. new webpack.NoEmitOnErrorsPlugin()
  6. ]

入口和出口

旧版本中需要配置入口文件和出口文件,新版本如果不执行入口和出口,那么默认的配置就会和下边一样

  1. module.exports = {
  2. entry: './src/index.js',
  3. output: {
  4. path: path.resolve(__dirname, './dist'),
  5. filename: 'main.js'
  6. }
  7. }

零配置 

因为很多都有默认值了,所以我们可以实现零配置

以上我们可以认为通过如下命令来实现

  1. webpack --mode=development

loader

略有些复杂的loader配置可能会比较麻烦,如果用命令行实现也可以,但会执行一条很长的命令

注意loader的顺序是不能乱的,比如css 需要先通过 css-loader 然后 style-loader写到页面内, 也就是说在 use 里是反着写的

  1.   module: {
  2. rules: [
  3. {
  4. test: /\.css$/,
  5. use: ['style-loader', 'css-loader']
  6. },
  7. {
  8. test: /\.less$/,
  9. use: ['style-loader', 'css-loader', 'less-loader']
  10. },
  11. {
  12. test: /\.(js|jsx)$/,
  13. use: ['babel-loader']
  14. },
  15. {
  16. test: /\.(png|jpg|jpeg|gif)$/,
  17. use: ['file-loader']
  18. }
  19. ]
  20. }

devServer

webpack-dev-server 可以快速让网站运行在一个 express 作为后台的虚拟服务器上,这样也可以实现很多开发的便利,比如热更新,浏览器实时刷新

主要参数

webpack4配置react开发环境的更多相关文章

  1. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  2. webpack配置React开发环境(上)

    Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Webpack,但是自己并没有研读总结过Web ...

  3. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  4. React开发环境配置

    本文以上一篇文章继续配置:npm安装及环境配置<https://www.cnblogs.com/hzb462606/p/11565275.html> 使用 create-react-app ...

  5. 二、react开发环境配置与webpack入门

    Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...

  6. 搭建 webpack、react 开发环境(一)

    基本介绍   Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...

  7. 从零搭建TypeScript与React开发环境

    前言 平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架.   我们业务仔做的最多就是npm i和npm run dev或者npm start,然 ...

  8. 安装与配置Flutter开发环境

    这篇博客我们介绍了Flutter,并且对比了H5,React Native,Flutter. 由于Flutter是跨平台的开发框架,开发一次可以同时运行在Android和iOS上面,所以我们开发时最好 ...

  9. react学习笔记(一)用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

随机推荐

  1. [JZOJ3167] 【GDOI2013模拟3】查税

    题目 描述 题目大意 维护一个有一次函数组成的序列 具体来说,对于位置xxx,现在的值为sx+zx∗(T−tx)s_x+z_x*(T-t_x)sx​+zx​∗(T−tx​) 有两个操作,修改某个位置上 ...

  2. LUOGU P3355 骑士共存问题(二分图最大独立集)

    传送门 因为骑士只能走"日"字,所以一定是从一个奇点到偶点或偶点到奇点,那么这就是一张二分图,题目要求的其实就是二分图的最大独立集.最大独立集=n-最大匹配. #include&l ...

  3. python 继承中的__init__

    如果子类不重写__init__, 实例化子类时,会自动调用父类定义的__init__ 如果子类要重写__init__,实例化子类,就不会调用父类已经定义的__init__ 所以如果想要扩充父类,需要显 ...

  4. 用maven创建Spring MVC项目

    用maven创建Spring MVC项目 mvn archetype:generate -DgroupId=fry-arthur -DartifactId=spring-mvc-study -Darc ...

  5. 杂项-公司:AT&T

    ylbtech-杂项-公司:AT&T AT&T公司(英语:AT&T Inc.,原为American Telephone & Telegraph的缩写,也是中文译名美国电 ...

  6. SpringBoot 01_HelloWorld

    本文环境配置: JDK:1.8 开发工具:IDEA 操作系统:Windows10 集成工具:Maven SpringBoot版本:1.5.6.RELEASE 构件方式:Spring Initializ ...

  7. Struts2转换器

    为什么进行类型转换 在基于HTTP协议的Web应用中 客户端请求的所有内容都以文本编码方式传输到服务器端 服务器端的编程语言却有着丰富的数据类型 继承StrutsTypeConverter抽象类 继承 ...

  8. nginx使用手册--nginx.conf文件配置详解

    #运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; ...

  9. 微信支付URL编解码小方法

    --> 打开chrome --> F12或Fn+F12打开控制台 --> encodeURIComponent("url") --> 回车

  10. 2019-6-14-WPF-shows-that-some-windows-in-multithreading-will-be-locked-in-the-PenThreadWorker-constr...

    title author date CreateTime categories WPF shows that some windows in multithreading will be locked ...