webpack4配置react开发环境
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
- 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的话,相当于旧版本的
- plugins: [
- new webpack.NamedModulesPlugin(),
- new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("development") }),
- ]
如果是production 的话,相当于旧版本的
- plugins: [
- new UglifyJsPlugin(/* ... */),
- new webpack.DefinePlugin({ "process.env.NODE_ENV":JSON.stringify("production") }),
- new webpack.optimize.ModuleConcatenationPlugin(),
- new webpack.NoEmitOnErrorsPlugin()
- ]
入口和出口
旧版本中需要配置入口文件和出口文件,新版本如果不执行入口和出口,那么默认的配置就会和下边一样
- module.exports = {
- entry: './src/index.js',
- output: {
- path: path.resolve(__dirname, './dist'),
- filename: 'main.js'
- }
- }
零配置
因为很多都有默认值了,所以我们可以实现零配置
以上我们可以认为通过如下命令来实现
- webpack --mode=development
loader
略有些复杂的loader配置可能会比较麻烦,如果用命令行实现也可以,但会执行一条很长的命令
注意loader的顺序是不能乱的,比如css 需要先通过 css-loader 然后 style-loader写到页面内, 也就是说在 use 里是反着写的
- module: {
- rules: [
- {
- test: /\.css$/,
- use: ['style-loader', 'css-loader']
- },
- {
- test: /\.less$/,
- use: ['style-loader', 'css-loader', 'less-loader']
- },
- {
- test: /\.(js|jsx)$/,
- use: ['babel-loader']
- },
- {
- test: /\.(png|jpg|jpeg|gif)$/,
- use: ['file-loader']
- }
- ]
- }
devServer
webpack-dev-server 可以快速让网站运行在一个 express 作为后台的虚拟服务器上,这样也可以实现很多开发的便利,比如热更新,浏览器实时刷新
主要参数
webpack4配置react开发环境的更多相关文章
- 基于webpack4的react开发环境配置
一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...
- webpack配置React开发环境(上)
Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Webpack,但是自己并没有研读总结过Web ...
- 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- React开发环境配置
本文以上一篇文章继续配置:npm安装及环境配置<https://www.cnblogs.com/hzb462606/p/11565275.html> 使用 create-react-app ...
- 二、react开发环境配置与webpack入门
Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...
- 搭建 webpack、react 开发环境(一)
基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...
- 从零搭建TypeScript与React开发环境
前言 平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架. 我们业务仔做的最多就是npm i和npm run dev或者npm start,然 ...
- 安装与配置Flutter开发环境
这篇博客我们介绍了Flutter,并且对比了H5,React Native,Flutter. 由于Flutter是跨平台的开发框架,开发一次可以同时运行在Android和iOS上面,所以我们开发时最好 ...
- react学习笔记(一)用create-react-app构建 React 开发环境
React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...
随机推荐
- [JZOJ3167] 【GDOI2013模拟3】查税
题目 描述 题目大意 维护一个有一次函数组成的序列 具体来说,对于位置xxx,现在的值为sx+zx∗(T−tx)s_x+z_x*(T-t_x)sx+zx∗(T−tx) 有两个操作,修改某个位置上 ...
- LUOGU P3355 骑士共存问题(二分图最大独立集)
传送门 因为骑士只能走"日"字,所以一定是从一个奇点到偶点或偶点到奇点,那么这就是一张二分图,题目要求的其实就是二分图的最大独立集.最大独立集=n-最大匹配. #include&l ...
- python 继承中的__init__
如果子类不重写__init__, 实例化子类时,会自动调用父类定义的__init__ 如果子类要重写__init__,实例化子类,就不会调用父类已经定义的__init__ 所以如果想要扩充父类,需要显 ...
- 用maven创建Spring MVC项目
用maven创建Spring MVC项目 mvn archetype:generate -DgroupId=fry-arthur -DartifactId=spring-mvc-study -Darc ...
- 杂项-公司:AT&T
ylbtech-杂项-公司:AT&T AT&T公司(英语:AT&T Inc.,原为American Telephone & Telegraph的缩写,也是中文译名美国电 ...
- SpringBoot 01_HelloWorld
本文环境配置: JDK:1.8 开发工具:IDEA 操作系统:Windows10 集成工具:Maven SpringBoot版本:1.5.6.RELEASE 构件方式:Spring Initializ ...
- Struts2转换器
为什么进行类型转换 在基于HTTP协议的Web应用中 客户端请求的所有内容都以文本编码方式传输到服务器端 服务器端的编程语言却有着丰富的数据类型 继承StrutsTypeConverter抽象类 继承 ...
- nginx使用手册--nginx.conf文件配置详解
#运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; ...
- 微信支付URL编解码小方法
--> 打开chrome --> F12或Fn+F12打开控制台 --> encodeURIComponent("url") --> 回车
- 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 ...