使用webpack从零开始搭建react项目
webpack的安装
yarn add webpack@3.10.1 --dev
需要处理的文件类型
webpack常用模块
webpack-dev-server
yarn add webpack-dev-server@2.9.7 --dev
webpack用法
创建webpack.config.js文件
const path = require('path');
module.exports = {
entry: './src/app.js', //入口文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
};
执行命令
node_module/.bin/webpack
打包html的配置
htmlWebpackPlugin
// 安装html-webpakc-plugin
yarn add html-webpack-plugin --dev
自定义html模版(title,mate等信息)
// webpack.config.js文件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
安装babel
// 安装
// 多个插件之间空格分隔
yarn add babel-core@6.26.0 babel-present-env@1.6.1 babel-loader@7.1.2 --dev
// webpack.config.js配置
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [require('@babel/plugin-transform-object-rest-spread')]
}
}
}
]
}
安装处理React的插件
babel-preset-react
//babel-preset-react
yarn add babel-preset-react@6.24.1 --dev
如额使用React
// 安装react react-dom
yarn add react react-dom
加载CSS
style-loader
与css-loader
module:{
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
将文件提取出来
ExtractTextWebpackPlugin
ExtractTextWebpackPlugin: 将包或包中的文本提取到单独的文件中。
配置
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module:{
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
处理sass
sass-loader
,sass-loader
依赖node-sass
与webpack
yarn add sass-loader node-sass
图片资源处理
用
file-loader
与url-loader
处理图片资源,url-loader
依赖file-loader
// 安装
yarn add url-loader file-loader --dev
// 配置
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
font-awesome
yarn add font-awesome
// jsx中引入css
import 'font-awesome/css/font-awesome.min.css';
CommonsChunkPlugin
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/base.js'
})
webpack-dev-server
// 安装
yarn webpack-dev-server@2.9.7
// webpack.config.js中 配置
devServer: {
contentBase: './dist'
port: 8086
}
// 更改启动方式 package.json
"scripts": {
"dev" : "node_modulse/.bin/webpack-dev-server",
"dist": "node_modules/.bin/webpack -p" //添加-p为线上打包
}
resolve
object
配置模块如何解析,例如,挡在ES2015中调用import "loadsh"
, resolve
选项能够对webpack查找"lodash"
的方式去做修改。
resolve.alias
object
创建import
或require
的别名,来确保模块引入变得更简单,例如一些位于src/
文件夹下的常用模块
// webpack.config.js 配置
module.exports = {
// ...
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/')
}
}
}
现在,替换【在导入时使用相对路径】这种方式,就像这样:
import Utility from '../../utilities/utility';
可以这样使用别名
import Utility from 'Utilities/utility';
devServer.historyApiFallback
当使用 HTML5 History API
时,任意的 404 响应都可能需要被替代为 index.html
。通过传入以下启用:
module.exports = {
// ...
devServer = {
historyApiFallback: {
index: '/dist/index.html'
}
}
}
接口Api代理devServer.proxy
如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用(可以避免浏览器跨域报错)。
在 localhost:3000 上有后端服务的话,你可以这样启用代理:
// webpack.config.js配置
module.exports = {
// ...
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
}
请求到 /api/users
现在会被代理到请求 http://localhost:3000/api/users
。
module.exports = {
// ...
devServer: {
proxy: {
'/manage': {
target: 'http://admintest.happymmall.com',
changeOrigin: true
},
'/user/logout.do': {
target: 'http://admintest.happymmall.com',
changeOrigin: true
}
}
}
}
使用webpack从零开始搭建react项目的更多相关文章
- 使用webpack搭建react项目 webpack-react-project
webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...
- 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
- [Web 前端] webstorm 快速搭建react项目
cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...
- 使用Yarn+Webpack+Babel6搭建React.js环境
使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...
- 从零开始使用 webpack5 搭建 react 项目
本文的示例项目源码可以点击 这里 获取 一.前言 webpack5 也已经发布一段时间了,其模块联邦.bundle 缓存等新特性值得在项目中进行使用.经过笔者在公司实际项目中的升级结果来看,其提升效果 ...
- 使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
- 利用create-react-app从零开始搭建React移动端环境
一 开始 1 全局安装脚手架 npm install -g create-react-app 这有个坑,就是在window下安装一直会报错,报错信息如下: 解决办法:在开始菜单栏里打开cmd的时,右击 ...
- 从零开始搭建react基础开发环境(基于webpack5)
前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...
- 🌅 使用 Dawn 快速搭建 React 项目!
开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及进行 jsx 语法的转义.当然也可以用 crea ...
随机推荐
- 洛谷P1378 油滴扩展
P1378 油滴扩展 题目描述 在一个长方形框子里,最多有N(0≤N≤6)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完 ...
- 魔卡少女(cardcaptor)——线段树
题目 [题目描述] 君君是中山大学的四年级学生.有一天在家不小心开启了放置在爸爸书房中的一本古书.于是,君君把放在书中最上面的一张牌拿出来观摩了一下,突然掀起一阵大风把书中的其她所有牌吹散到各地.这时 ...
- 浅析localstorage、sessionstorage
原文链接:http://caibaojian.com/localstorage-sessionstorage.html 简介 html5 中的 web Storage 包括了两种存储方式:sessio ...
- cropper.js裁剪图片的使用
这两天难得有时间可以整理一下最近学习的东西,这两天项目中用到了头像上传裁剪的功能,这里只介绍头像的裁剪吧. 单独实现图片剪裁的功能还是挺容易的,入门级别的.看一遍官方给的文档,基本上就明白了.大家如果 ...
- spring cloud微服务三:Eureka服务治理之注册服务提供者及服务的发现和消费
当服务注册中心成功建立以后,就需要有服务的注册和消费,否则这个服务注册中心就没有了存在的意义,而实际上,一个简单的服务注册也是非常简单的,仅仅需要实现四部曲就好. 首先,还是建立一个基本的spring ...
- .netcore中无法使用System.Drawing --解决方案
问题重现: 无法正常使用 解决方法: 安装System.Drawing.Common的NuGet就能正常使用了 操作之后: 这个是.netcoe中的解决办法,.net framework解决方案中添 ...
- 15-----jQuery补充
jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件.jqueryUI知识点 jqueryUI 官网: https://jqueryui.com/ jqueryUI 中文网: http ...
- JS——操作元素属性
属性的操作包括:读和写 方法: 1)”.“操作 2)”[ ]“操作 eg: var oDiv = document.getElementById('div1'); var attr = 'color' ...
- Python中的集合类型分类和集合类型操作符解析
集合类型 数学上,把set称作由不同的元素组成的集合,集合(set)的成员通常被称作集合元素(set elements). Python把这个概念引入到它的集合类型对象里.集合对象是一组无 ...
- ${openid_wx} el解析式放入url的“”里才起作用。
window.location.href="${ctx }/wx/reservation/content?shopid="+shopid+"&&openi ...