摘要:相关链接详细教程,从无到有搭建脚手架一配置插件,这两个插件基本上是必配的了介绍每次打包时清理上次打包生成的目录官网指南关于这个插件部分内容已经过时没有更新,按照官网配置会出错,所以参考上这个插件文档来配置,文档地址生成打
相关链接
webpack4详细教程,从无到有搭建react脚手架(一)
配置插件 clean-webpack-plugin、 html-webpack-plugin, 这两个插件基本上是必配的了 介绍clean-webpack-plugin - 每次打包时清理上次打包生成的目录
官网指南关于这个插件部分内容已经过时没有更新,按照官网配置会出错,所以参考github上这个插件文档来配置, 文档地址: https://github.com/johnagan/c...
html-webpack-plugin - 生成打包文件中的 index.html
安装</>复制代码
yarn add clean-webpack-plugin html-webpack-plugin -D
这两个插件在两种模式下都要用到,所以配置在common.js
</>复制代码
config/webpack.common.js
</>复制代码
...
+ const HtmlWebpackPlugin = require("html-webpack-plugin");
+ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
function webpackCommonConfigCreator(options){
...
return {
...
plugins: [
+ new HtmlWebpackPlugin(),
+ new CleanWebpackPlugin({
+ cleanOnceBeforeBuildPatterns: [path.resolve(process.cwd(), "build/"), path.resolve(process.cwd(), "dist/")]
+ }),
]
}
}
...
更改开发代码,在页面上插入一个元素
</>复制代码
src/index.js
</>复制代码
var ele = document.createElement("div");
ele.innerHTML = "hello webpack";
document.body.appendChild(ele);
效果
yarn start, 效果:
yarn build, build目录下生成index.html并且引入了bundle.js
接下来配置react
React 安装react</>复制代码
yarn add react react-dom
安装babel
</>复制代码
yarn add @babel/core @babel/cli @babel/preset-env -D
yarn add @babel/preset-react -D
yarn add babel-loader -D
配置babel-loader
</>复制代码
config/webpack.common.js
</>复制代码
...
function webpackCommonConfigCreator(options){
...
return {
...
+ module: {
+ rules: [
+ {
+ test: /.(js|jsx)$/,
+ include: path.resolve(__dirname, "../src"),
+ use: [
+ {
+ loader: "babel-loader",
+ options: {
+ presets: ["@babel/preset-react"],
+ }
+ }
+ ]
+ }
+ ]
+ },
...
}
}
准备基本的react文件
</>复制代码
src/index.js
</>复制代码
import React from "react";
import ReactDom from "react-dom";
import App from "./App.js";
ReactDom.render(, document.getElementById("root"));
</>复制代码
src/App.js
</>复制代码
import React from "react";
function App(){
return (
hello react
)
}
export default App;
App节点挂在在id为root的div上,而html-webpack-plugin插件默认生成的html没有这个div, 所以需要配置插件使用我们定义的模板
创建public/index.html
</>复制代码
public/index.html
</>复制代码
<span class="hljs-attr">react</span> <span class="hljs-string">webpack</span>
</>复制代码
config/webpack.common.js
</>复制代码
...
function webpackCommonConfigCreator(options){
...
return {
...
plugins: [
- new HtmlWebpackPlugin(),
+ new HtmlWebpackPlugin({
+ template: path.resolve(__dirname, "../public/index.html")
+ }),
...
]
}
}
yarn start, 编译正常
React模块热替换
开发模式下,改动代码,浏览器将刷新页面来更新改动,配置模块热替换,浏览器不刷新,而是通过dom操作来更新改动,对频繁更新代码的开发模式更加友好
安装loader</>复制代码
yarn add react-hot-loader -D
配置loader
</>复制代码
config/webpack.common.js
</>复制代码
...
function webpackCommonConfigCreator(options){
...
return {
...
module: {
rules: [
{
test: /.(js|jsx)$/,
include: path.resolve(__dirname, "../src"),
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-react"],
+ plugins: ["react-hot-loader/babel"],
}
}
]
}
]
},
...
}
}
修改react代码
</>复制代码
src/App.js
</>复制代码
+ import {hot} from "react-hot-loader/root";
...
export default hot(App);
开启webpackDevServer热加载
</>复制代码
config/webpack.dev.js
</>复制代码
...
const config = {
devServer: {
contentBase: path.join(__dirname, "../dist"),
+ hot: true
}
}
...
相关链接
webpack4详细教程,从无到有搭建react脚手架(三)
webpack4详细教程,从无到有搭建react脚手架(四)
源码github仓库: https://github.com/tanf1995/W...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105478.html
摘要:是一个现代应用程序的静态模块打包器,前端模块化的基础。作为一个前端工程师切图仔,非常有必要学习。官网的文档非常的棒,中文文档也非常给力,可以媲美的文档。建议先看概念篇章,再看指南,然后看和配置总览。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器,前端模块化的基础。作为一个前端工程师(切图仔),非常有必要学习。 showImg(https://segment...
摘要:相关链接详细教程,从无到有搭建脚手架一详细教程,从无到有搭建脚手架二详细教程,从无到有搭建脚手架三管理打包后目录结构打包结构如下修改配置通过相对目录对资源命名前加上目录名,效果后面的步骤在这里需要安装一个大型的包,以为例安装为第三 相关链接 webpack4详细教程,从无到有搭建react脚手架(一) webpack4详细教程,从无到有搭建react脚手架(二) webpack4详细...
摘要:相关链接详细教程,从无到有搭建脚手架一详细教程,从无到有搭建脚手架二安装配置创建,效果安装配置创建效果配置模式修改配置现在编译后的由动态内联在中,需要分离到单独的文件安装插 相关链接 webpack4详细教程,从无到有搭建react脚手架(一) webpack4详细教程,从无到有搭建react脚手架(二) Css 安装loader yarn add style-loader css...
摘要:写在前面准备学习一下和相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建全家桶框架教程步骤上都差不多第一步,依赖总览完成到我现在半成品的过程中,目前完成开发模式的相关操作,添加了按需加载的地步。 写在前面 准备学习一下react和webpack相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建React全家桶框架教程;...
摘要:今天就尝试着一起来聊聊吧,旨在帮大家加深理解新手更容易上路,都能从到搭建配置自定属于自己的脚手架,或对已封装好的脚手架有进一步的巩固,接下来苏南会详细讲解中的每一个配置字段的作用部分为新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言 经常会有群友问起webpack、react、redux、甚至cre...
阅读 2904·2021-10-08 10:04
阅读 3379·2021-09-10 11:20
阅读 588·2019-08-30 10:54
阅读 3442·2019-08-29 17:25
阅读 2380·2019-08-29 16:24
阅读 980·2019-08-29 12:26
阅读 1537·2019-08-23 18:35
阅读 2071·2019-08-23 17:53