搭建 webpack、react 开发环境(一)
基本介绍
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript、css、less 等转换成一个静态文件,减少了页面的请求。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,它是一个用于构建用户界面的 JAVASCRIPT 库,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。由于拥有较高的性能,代码逻辑非常简单,所以在全球范围内的使用率都比较高。
这一次为了更好的学习 webpack 环境的构建和开始 React 的开发,工程搭建将会以实现一个 todolist 为目标,将每一个节点作为一个 commit,以便更直观的查看实现一个功能点所需要做的事情,同时也使得选择所需的依赖变得更简单可行。
你可以点击 show me the code 来查看和 Fork 此项目,如果你需要查看更多关于 Angular或Vue 开发环境的搭建可以点击 查看更多 来进行查看,欢迎大家一起学习和交流。
安装配置 webpack 基础
- 首先新建工程目录,这里我们给项目名称取名为 webpack-react,对其进行创建并进入该目录:
$ mkdir webpack-react && cd webpack-react
然后进行初始化生成 package.json 文件(其中记录定义了这个项目所需要的各种模块,以及项目的配置信息,比如比如名称、版本、许可证等元数据):
$ yarn init
根据提示我们可以设置相关信息,或者一路默认(回车)即可,当然如果你只要生成默认的,我们可以在执行初始化时命令时加上一个参数:$ yarn init -y
即可。
- 然后安装 webpack,由于我们使用的是 webpack4+ 的版本,所以我们还需要安装 CLI:
$ yarn add webpack webpack-cli --dev
当我们使用 yarn add 时,不仅会安装对应的包,并会将包的信息写进 yarn.lock 文件,从事该项目的其他开发人员在运行 yarn或yarn install 时将获得与您相同的依赖项。
在 webpack 4 不是必须要有配置文件的,所以此时如果我们在 index.js 中添加内容直接执行 webpack 就可以进行打包,因为在 webpack 4 中默认入口文件为 ./src/index.js,默认出口文件为 ./dist/main.js。
安装完成之后我们来对 webpack 进行简单的配置,首先我们在 package.json 同级目录下创建 config 目录用于放置部分配置文件,现在我们在 config 目录下新建 webpack.base.config.js 文件,用来存放开发模式和生产模式公共的配置文件,创建 webpack.dev.config.js 文件,用来存放开发模式下的配置文件,创建 webpack.build.config.js 文件,用来存放生产模式下的配置文件:
$ mkdir config
$ cd config
$ touch webpack.base.config.js webpack.dev.config.js webpack.build.config.js现在我们先向共同的配置文件 webpack.base.config.js 中写入以下内容:
const path = require('path');
module.exports = {
// 入口配置
entry: {
main: path.join(__dirname, '../src/index.js'),
},
// 输出配置
output: {
filename: 'js/[name].js', // 输出文件的文件名
path: path.join(__dirname, '../dist'), // 输出文件所在目录
}
};如配置中所示,现在我们去对应的目录下创建对应的入口文件 index.js,并在其中输出“Hello world”:
// index.js
console.log('打包成功'); - 刚刚我们建立三个配置文件,为了将两个模式下的配置文件与公共配置文件结合起来,我们需要安装和使用 webpack-merge 来进行合并:
$ yarn add webpack-merge --dev
这里我们先对开发模式下的配置文件进行配置:
// 引入公共配置
const webpackBaseConfig = require('./webpack.base.config');
// 合并配置的插件
const webpackMerge = require('webpack-merge'); module.exports = webpackMerge(webpackBaseConfig, {
// 指定模式
mode: 'development',
// devtool由 webpack 直接提供,将打包后的文件中的错误映射到最初对应的文件中,便于调试
devtool: 'cheap-module-eval-source-map'
});顺便我们也把生产模式下也简单的配置一下,有时候我们也可以打包一下,查看打包后文件存放的名称和路径等,以检测书写错误导致一些错误,当然现在我们只需要对其进行简单的配置:
// 引入公共配置
const webpackBaseConfig = require('./webpack.base.config');
// 合并配置的插件
const webpackMerge = require('webpack-merge'); module.exports = webpackMerge(webpackBaseConfig, {
// 指定模式
mode: 'production'
}); - 使用 webpack-dev-server 构建本地服务器:webpack-dev-server 提供了一个简单的 web 服务器,并且能够实时重新加载。它的使用也比较简单,首先我们对其进行安装:
$ yarn add webpack-dev-server --dev
由于它直接开发模式下会被用到,所以我们直接去开发模式的配置文件(webpack.dev.config.js)下进行配置:
const path = require('path');
// 引入公共配置
const webpackBaseConfig = require('./webpack.base.config');
// 合并配置的插件
const webpackMerge = require('webpack-merge'); module.exports = webpackMerge(webpackBaseConfig, {
// 指定模式
mode: 'development',
// devtool由 webpack 直接提供,将打包后的文件中的错误映射到最初对应的文件中,便于调试
devtool: 'cheap-module-eval-source-map',
// 对 webpack-dev-server 进行配置
devServer: {
//本地服务器所加载的页面所在的目录
contentBase: path.join(__dirname, "../dist"),
/* 服务器的主机号,默认是 localhost
* 将该地址设为电脑的 ip 地址,局域网内的移动设备通过访问该地址下的30端口即可访问 web 应用
*/
host: 'localhost',
// 端口
port: 3000,
/* 设置编译后文件的路径,导致最后的文件文件地址为:http://localhost:3000/dist/index.js
*
* publicPath: 'http://localhost:3000/',
*/
/* 应对返回404页面时定向到特定页面
*
* historyApiFallback: {
* rewrites: [{
* from: /./,
* to: '/404.html'
* }]
* },
*/
// 热模块替换机制
//- hot: true,
/* 默认为 true, 意思是,在打包时会注入一段代码到最后的 js 文件中,用来监视页面的改动而自动刷新页面
* 当为 false 时,网页自动刷新的模式是 iframe,也就是将模板页放在一个 frame中
*
* inline: true,
*/
// 为 true 时,dev server 第一次会自动打开浏览器
open: true,
/* 对所有的服务器资源采用 gzip 压缩
* 对 JS,CSS 资源的压缩率很高,可以极大得提高文件传输的速率
* 但是需要服务端要对文件进行压缩,客户端进行解压,增加了两边的负载
*
* compress: true
*/
disableHostCheck: true
}
}); - 因为我们构建的是一个 web 应用,所以我们还需要对 .html 文件编译的支持,这样也可以更直观的看清我们 webpack 工作的情况,为此我们需要安装 html-webpack-plugin 以及 html-loader 加载器:
$ yarn add html-webpack-plugin html-loader --dev
因为该配置在两种模式下都需要使用,所以我们在公共配置文件中进行配置:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口配置
entry: {
main: path.join(__dirname, '../src/index.js'),
},
// 输出配置
output: {
filename: 'js/[name].js', // 输出文件的文件名
path: path.join(__dirname, '../dist'), // 输出文件所在目录
},
// 加载器
module: {
rules: [{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
}]
},
// 插件管理
plugins: [
//创建 .html 并自动引入打包后的文件
new HTMLWebpackPlugin({
filename: 'index.html',
template: 'index.html',
// 参照最初创建的 .html 来生成 .html
inject: true,
// 引入根路径下的 favicon.ico
favicon: path.resolve('favicon.ico')
})
]
};当然我们在这里还需要在对应的目录下创建 index.html,也就是在根目录下:
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>webpack-react</title>
</head> <body>
<noscript>
You need to enable JavaScript to run this app.
</noscript> <div id="root">Hello world</div>
</body> </html> - 在安装和配置完上面的基本信息之后,最后我们需要来使用上面做的一切准备,首先我们需要设置 NPM 脚本(NPM Scripts)。打开我们最初初始化项目时生成的 package.json 文件,在对应的 script 字段下进行配置:
"scripts": {
"dev": "webpack-dev-server --config config/webpack.dev.config.js",
"build": "webpack --config config/webpack.prod.config.js"
}Npm 中允许在 package.json 文件里面,使用 scripts 字段定义脚本命令。它是一个对象,它的每一个属性,都对应一段脚本。
每当执行 npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定的脚本命令,新建的这个 Shell,会将当前目录的 node_modules/.bin 子目录加入 PATH 变量,执行结束后,再将 PATH变量恢复原样,所以当前目录的 node_modules/.bin 子目录里面的所有脚本,都可以直接用脚本名调用,而不必加上路径。
因为我们的配置文件不在根目录下,在这里我们通过 --config 来指定执行脚本路径,现在我们就可以使用 npm run dev 开启 web 应用,如果前面的操作正确的化你将看到页面上显示“Hello world”的字样,并且控制台中输入“编译成功”的字样。
配置支持 ES6、JSX
如今在前端开发中 Javascript 主要是用 ES6 编写的,但并不是所有的浏览器都知道如何处理 ES6,因此我们需对 ES6 进行转换。
在 webpack 的 loader(加载器)中,babel-loader 正是这样一个用于将 ES6 及以上版本转译至 ES5 的神器,要使用它我们还需要安装一些依赖:
$ yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react --dev
然后需要在公共配置文件中 rules 属性配置 babel-loader 的相关信息:
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
最后我们需要在根目录下创建 .babelrc 文件写入以下内容:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
现在我们就可以在项目中使用 ES6或着是JSX 语法啦。
配置支持 React、React-dom
首先我们将根目录下 index.html 文件中的 "Hello world"文本删掉,然后在 ./src/index.js 文件中写入下面的内容:
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>Hello world</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
显然保存后运行服务会报错,因为到目前位置我们的项目还不支持 React、React-dom,为了进行 React 开发,首先我们要安装如下依赖:
$ yarn add react react-dom
安装完成之后,再启动项目,会发现刚刚删除的 "Hello world"文本再次出现了,而且是通过 React 来实现的,到此 webpack-react 最基础的开发环境就搭建好了,但是 webpack 方面还有许多配置和一些需要优化的地方,所以我们将在下篇文章里继续记录开发环境的搭建过程,你可以点击 搭建 webpack、react 开发环境(二) 来继续查看。
搭建 webpack、react 开发环境(一)的更多相关文章
- 从零开始搭建webpack+react开发环境
环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...
- 搭建 webpack + React 开发环境
说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...
- 如何搭建 node,react 开发环境
项目相关内容:Sublime + Node + React --注意:在 windows 操作系统中,如果把 node 安装在系统盘(一般是C盘),会导致 node 没有操作文件的权限的问题,如无法新 ...
- Webpack笔记(二)——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- 搭建 webpack、react 开发环境(三)
配置 react-router-dom 我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...
- 搭建 webpack、react 开发环境(二)
配置处理样式文件 到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...
- 从零搭建TypeScript与React开发环境
前言 平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架. 我们业务仔做的最多就是npm i和npm run dev或者npm start,然 ...
- windows环境下搭建vue+webpack的开发环境
前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...
- 二、react开发环境配置与webpack入门
Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...
随机推荐
- CSS 实现水平垂直居中
使用绝对定位 在已经知道子元素的宽高的时候,子元素设置成绝对定位,top,left,right,bottom=0, margin = auto .wrap{ position: relative; w ...
- metasploit下Windows的多种提权方法
metasploit下Windows的多种提权方法 前言 当你在爱害者的机器上执行一些操作时,发现有一些操作被拒绝执行,为了获得受害机器的完全权限,你需要绕过限制,获取本来没有的一些权限,这些权限可以 ...
- Windows程序设计(七)--鼠标
7.2 客户区鼠标消息 当鼠标移过窗口的显示区域时,窗口消息处理程序收到WM_MOUSEMOVE消息.当在窗口的显示区域中按下或者释放一个鼠标按键时,窗口消息处理程序会接收到下面这些消息: 键 按下 ...
- web笔记全
1.项目流程与数据库 1.课程体系 阶段1(服务器开发): 项目导入/数据库/JS基础/NodeJS 阶段2(前端核心技术): HTML/AJAX/CSS/bootstrap 阶段3(前端进阶技术): ...
- sed使用---转义字符
https://blog.csdn.net/wangcg123/article/details/50667883 单引号里面,s表示替换,三根斜线中间是替换的样式,特殊字符需要使用反斜线”\”进行转义 ...
- 罗技K380使用手册
Ipad最佳伴侣|码字神器|罗技K380|附使用指南 ———— 为了方便平时在家处理工作➕写小红书笔记,年初买了个Ipad2018 我以前买过一个罗技的K480,因为太重了不方便携带,于是又入了K38 ...
- controler--application配置
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- 一次OOM测试并分析
堆dump文件分析 Java代码: public class HeapTest2 { static class OOMObject { private byte[] arrs = new byte[6 ...
- spring-boot整合mongodb的案例
1.简介 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品 ...
- 4412 4路pwm输出
一.4412 xpwmTOUT1 这是4412的GPD0_1路,itop中被使用为LCD的背光电路的pwm功能.因此如果使用教程中的代码,同样操作GPD0_1是行不通的. 会出现错误,所以需要解除在内 ...