使用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 ...
随机推荐
- 牛客网NOIP赛前集训营-提高组(第四场)B题 区间
牛客网NOIP赛前集训营-提高组(第四场) 题目描述 给出一个序列 a1, ..., an. 定义一个区间 [l,r] 是好的,当且仅当这个区间中存在一个 i,使得 ai 恰好等于 al, al+1, ...
- Stream流、方法引用
Stream流.方法引用 Stream流.方法引用 Stream流.方法引用 Stream流.方法引用 Stream流.方法引用 ... ...
- File类、递归
File类.递归 1.1File类概述 java.io.File表示文件和目录路径名的抽象类.可以对文件和文件夹进行创建删除.获取.判断.遍历等功能. 1.2路径\文件分割符,相对路径绝度路径 1.2 ...
- 找出list中的不同元素、删除两个list中相同的对象
package com.test; import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; ...
- POJ1032 Parliament
题目来源:http://poj.org/problem?id=1032 题目大意:给定一个正整数N(5<=N<=1000),将N拆为若干个不同的数使得它们的乘积最大(找到一组互不相等,和为 ...
- LDAP--对某些AD属性值是字节数组byte[]情况的类型转换方法
//BitConverter.ToBoolean((searchResult.Properties["mDBUseDefaults"][0] as byte[]), 0); row ...
- win10系统添加照片查看器(win7版)
很多人不习惯win10的照片查看器,还是比较怀念win7版本的照片查看器,通过以下两种方法可以在win10图片上点击右键时,"打开方式"中重现"Windows照片查看器& ...
- Solve Equations HackerRank 扩展欧几里德 && 数学
https://www.hackerrank.com/contests/infinitum16-firsttimer/challenges/solve-equations 给定一条方程a*x + b* ...
- python操作json文件
import json class OperationJson(object): def __init__(self,file_name=None): if file_name: self.file_ ...
- PowerShell 操作 OFFICE
UiPath操作Office软件的方式,这里说一下用PowerShell调用Office的COM组件的方式 老生常谈~每个程序员都要至少掌握一门脚本编程语言... EXCEL: $excel = Ne ...