共计 4231 个字符,预计需要花费 11 分钟才能阅读完成。
尽管说当初创立一个 react 我的项目,打包的配置都是曾经配置好了的,只须要咱们运行相应的打包命令就行了,然而咱们还是很有必要晓得该怎么来配置打包须要的配置。
上面就让咱们来走一遍 webpack
打包 react 我的项目的整个过程吧。
创立一个 React 我的项目
这里就不应用 create-react-app
指令创立 React 我的项目了,因为用 create-react-app
创立的我的项目,外面的配置曾经配置好了。
本文就间接应用 yarn init
初始化
并创立上面的目录构造:
装置 webpack
应用
yarn add webpack webpack-cli --dev
--dev
是部分装置的意思,为什么是部分装置呢?
因为并不是所有我的项目都须要应用 webpack
,所以只须要在须要应用的我的项目外面装置就行了;
但最次要的起因还是,如果全局装置 webpack
的话,一个其余使用者在应用这个我的项目的时候,他的电脑没有全局装置 webpack
,那么将运行不起来,但如果是部分装置的话,其余使用者只须要在开始 install
一次就行了。
应用 npx webpack -h
查看是否装置胜利
因为是部分装置,因而 webpack
是在依赖包里的,对于它们命令的执行,要进入依赖包才行,否则是被认为命令有效的。或者,应用 npx
会主动找到对应的包执行命令,它是一个 npm
包执行器,个别装置了 npm
会主动装置 npx
,总之,有了这个工具,执行部分的 webpack
命令就没那么简短了。
在根目录下增加 webpack.config.js
配置文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {path: path.resolve(__dirname, 'dist')
}
}
应用 npx webpack
对我的项目进行打包解决
能够在我的项目目录上面发现打包好的 dist
文件夹
在 index.html
文件中引入打包好的 dist 中的 main.js
文件,并运行 index.html
文件,能够在浏览器的控制台中看到打印了 hello world
。
咱们能够应用插件来生成 html
文件,这样就防止了 html
每次去手动引入js
;应用插件来删除上次打包的后果。
// 装置依赖
yarn add --dev html-webpack-plugin clean-webpack-plugin
在 webpack.config.js
中应用插件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {path: path.resolve(__dirname, 'dist')
},
plugins:[new HtmlWebpackPlugin({template:'./public/index.html'}),
new CleanWebpackPlugin()]
}
运行 dist 中的 index.html 文件
这里打印了两次,是因为原来在 public/index.html
中引入了一次 main.js
,打包的时候又引入了一次,所以一共引入了两次,所以打印了两次 hello world
。
更多对于 webpack 的配置阐明能够 webpack 官网
React 应用 webpack
根本配置
下载 react
,react-dom
,react-scripts
yarn add react react-dom react-scripts
批改 index.js
文件,增加 App.js
文件
在 package.json
文件中退出:
"scripts": {"start": "react-scripts start"}
运行 yarn start
…. 报错
发现是装置的 react
的包外面的 webpack
和本人装置的 webpack
包的版本抵触了
升高装置的 webpack
包的版本:
删除 node_modules
和 yarn.lcok
,批改 package.json
外面 webpack
的版本为 4.44.2
从新下载好后,cnpm start
没问题!
然而应用 npx webpack
,又报错!
查看一圈发现是 html-webpack-plugin
插件版本问题。
yarn remove html-webpack-plugin
yarn add --dev html-webpack-plugin@^3.2.0
下载好之后运行 npx webpack
这是因为不反对 JSX 语法包的错,所以须要去配置 loader
了
去 babel 的官网,看看如何配置 jsx 语法 loader
下载
yarn add --dev @babel/preset-react babel-loader @babel/core
在 webpack.config.js
退出 loader
配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {path: path.resolve(__dirname, 'dist')
},
plugins:[new HtmlWebpackPlugin({template:'./public/index.html'}),
new CleanWebpackPlugin()],
module: {
rules: [
{test: /\.(js|jsx|ts|tsx)$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {presets: ['@babel/preset-react']
}
}
]
}
]
}
}
CSS 配置
持续配置 css
须要的配置
创立 App.css
文件,并引入
// App.js
import React, {PureComponent} from 'react';
import './App.css';
class App extends PureComponent{constructor(props){super(props);
this.state = {};}
render(){
return (<div className='hello'>Hello World!</div>)
}
}
export default App;
// App.css
.hello {color: red;}
下载 style-loader
,css-loader
,这里要特地留神 loader
的版本问题,能够应用 npm ls style-loader
查看 react
装置好了的 loader 是什么版本的(因为下载了 react-scripts
,这个包外面也有打包性能,所以外面必定配置了 style-loader
,css-loader
这些 loader 的),咱们就装置多少版本的。
应用
yarn add --dev style-loader@1.3.0 css-loader@4.3.0
在 webpack.config.js
中退出配置
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}
配置好后,npx webpack
打包,运行 dist/index.html
,发现 Hello World
字体色彩为红色。
在控制台调试发现,css 款式的引入是在 head
插入的,当我的项目变大时款式直接插入 head 中的形式并不好,咱们须要将款式拆散
应用 mini-css-extract-plugin
插件,它会将 CSS 提取到独自的文件中,为每个蕴含 CSS 的 JS 文件创建一个 CSS 文件,并且反对 CSS 和 SourceMaps 的按需加载。
下载 mini-css-extract-plugin
yarn add --dev mini-css-extract-plugin@0.11.3
webpack.config.js
配置 mini-css-extract-plugin
plugins: [
...
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
]
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
"css-loader"
]
}
]
}
配置 img、font、map3 等资源的 loader
应用 url-loader,它的性能相似于 file-loader, 然而在文件大小(单位为字节)低于指定的限度时,能够返回一个 DataURL
。
yarn add --dev url-loader@4.1.1
// App.css
.hello {
color: red;
background: url('./assets/backgroud2.jpg') no-repeat center;
background-size: cover;
height: 100vh;
}
webpack.config.js
增加配置
{test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 1000,
name: 'static/img/[name].[hash:7].[ext]'
}
}
运行 dist/index.html
报如下谬误:
这是因为本地没有启动 web 服务,所以浏览器拜访不了本地的资源,这是失常的。
其余资源的配置和下面的差不多,这里就不做介绍了。
参考资料:
应用 webpack4 从零配置 react 我的项目