webpack中文文档

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-loadercss-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-sasswebpack

yarn add sass-loader node-sass
图片资源处理

file-loaderurl-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

创建importrequire的别名,来确保模块引入变得更简单,例如一些位于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项目的更多相关文章

  1. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  2. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  3. [Web 前端] webstorm 快速搭建react项目

    cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...

  4. 使用Yarn+Webpack+Babel6搭建React.js环境

    使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...

  5. 从零开始使用 webpack5 搭建 react 项目

    本文的示例项目源码可以点击 这里 获取 一.前言 webpack5 也已经发布一段时间了,其模块联邦.bundle 缓存等新特性值得在项目中进行使用.经过笔者在公司实际项目中的升级结果来看,其提升效果 ...

  6. 使用 webpack 搭建 React 项目

    简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

  7. 利用create-react-app从零开始搭建React移动端环境

    一 开始 1 全局安装脚手架 npm install -g create-react-app 这有个坑,就是在window下安装一直会报错,报错信息如下: 解决办法:在开始菜单栏里打开cmd的时,右击 ...

  8. 从零开始搭建react基础开发环境(基于webpack5)

    前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...

  9. 🌅 使用 Dawn 快速搭建 React 项目!

    开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及进行 jsx 语法的转义.当然也可以用 crea ...

随机推荐

  1. 洛谷P1378 油滴扩展

    P1378 油滴扩展 题目描述 在一个长方形框子里,最多有N(0≤N≤6)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完 ...

  2. 魔卡少女(cardcaptor)——线段树

    题目 [题目描述] 君君是中山大学的四年级学生.有一天在家不小心开启了放置在爸爸书房中的一本古书.于是,君君把放在书中最上面的一张牌拿出来观摩了一下,突然掀起一阵大风把书中的其她所有牌吹散到各地.这时 ...

  3. 浅析localstorage、sessionstorage

    原文链接:http://caibaojian.com/localstorage-sessionstorage.html 简介 html5 中的 web Storage 包括了两种存储方式:sessio ...

  4. cropper.js裁剪图片的使用

    这两天难得有时间可以整理一下最近学习的东西,这两天项目中用到了头像上传裁剪的功能,这里只介绍头像的裁剪吧. 单独实现图片剪裁的功能还是挺容易的,入门级别的.看一遍官方给的文档,基本上就明白了.大家如果 ...

  5. spring cloud微服务三:Eureka服务治理之注册服务提供者及服务的发现和消费

    当服务注册中心成功建立以后,就需要有服务的注册和消费,否则这个服务注册中心就没有了存在的意义,而实际上,一个简单的服务注册也是非常简单的,仅仅需要实现四部曲就好. 首先,还是建立一个基本的spring ...

  6. .netcore中无法使用System.Drawing --解决方案

    问题重现: 无法正常使用  解决方法: 安装System.Drawing.Common的NuGet就能正常使用了 操作之后: 这个是.netcoe中的解决办法,.net framework解决方案中添 ...

  7. 15-----jQuery补充

    jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件.jqueryUI知识点 jqueryUI 官网: https://jqueryui.com/ jqueryUI 中文网: http ...

  8. JS——操作元素属性

    属性的操作包括:读和写 方法: 1)”.“操作 2)”[ ]“操作 eg: var oDiv = document.getElementById('div1'); var attr = 'color' ...

  9. Python中的集合类型分类和集合类型操作符解析

    集合类型    数学上,把set称作由不同的元素组成的集合,集合(set)的成员通常被称作集合元素(set elements).    Python把这个概念引入到它的集合类型对象里.集合对象是一组无 ...

  10. ${openid_wx} el解析式放入url的“”里才起作用。

    window.location.href="${ctx }/wx/reservation/content?shopid="+shopid+"&&openi ...