概述
由于最近项目需求，需要在原有架构上添加新功能模块。新功能模块基于react开发。
大部分react单页应用使用 Create React App 这个脚手架进行初始化。由于本项目需要将其封装为模块，故需要自定义打包部分，将css js 单独打包为引用文件，以此为基础二次调用。
依赖环境安装
webpack4
由于本机已有其他使用打包的程序，webpack4 为全局安装选项。4版本中cli需要单独安装。
npm i webpack webpack-cli -g
babel 及相关组件
官网示例中使用了babel6版本。官网DEMO
官网版本示例中 安装示例
npm install babel-cli@6 babel-preset-react-app@3
官网版本中处理jsx文件示例
npx babel --watch src --out-dir . --presets react-app/prod
但由于当前需求比较复杂，而本机babel环境为7版本。故本次打包也使用7版本babel。
7版本babel中对各组件命名和内容都有了一系列的修改。升级后带@的组件，大体上为babel7版本组件。
安装babel及相关
npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D
安装后 package.json内容如下
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4"
}
安装 babel-loader
npm i babel-loader -D
以上安装好之后，就可以进行初步的配置文件编写了。
webpack配置
webpack配置文件为 webpack.config.js
REACT组件打包
- 使用 @babel/preset-env 进行 ES6 转码
- 使用 @babel/preset-react React 转码
const path = require('path')
module.exports = {
// 入口文件
entry: './src/index.js',
// 打包模式
mode: 'development',
resolve: {
// 解析顺序
extensions: ['.js', '.jsx', '.scss', '.css']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}],
exclude: /node_modules/
}
]
},
output: {
// 输出文件目录
path: path.resolve(__dirname, 'dist'),
// 输出文件名称 -打包需求不需要hash码 此处可以加hash
filename: 'index.js'
}
}
至此完成 对index.js 和REACT相关引用的配置。
scss 自动化打包
由于组件调用需求 css为单独引用部分。故希望在各自独立组件打包时，也进行同步打包。
由于 webpack 4 与 extract-text-webpack-plugin目前还有兼容问题，又不想使用bate版本。故使用mini-css-extract-plugin插件对scss和 css进行打包。
安装打包组件包
npm i mini-css-extract-plugin autoprefixer css-loader node-sass postcss-loader sass-loader style-loader -D
安装后 package.json 内容增加
{
"autoprefixer": "^9.7.6",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3"
}
配置插件,参数中没有路径选项，但是实测可以在filename中带入路径。
const extractSass = new MiniCssExtractPlugin({
filename: '/css/index.css'
})
在rule中添加
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
],
exclude: /node_modules/
}
加入插件
plugins: [extractSass]
配置后的整体配置文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
const extractSass = new MiniCssExtractPlugin({
filename: '/css/index.css'
})
module.exports = {
entry: './src/index.js',
mode: 'development',
resolve: {
extensions: ['.js', '.jsx', '.scss', '.css']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
},
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
// publicPath: 'css',
importLoaders: 2,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
],
exclude: /node_modules/
}
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
plugins: [extractSass]
}
以上 运行 webpack 或者 webpack --wacth 就可以完成对组件的打包。
打包结果测试
建立 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- 将放置React组件在这个div中 -->
<div id="like_button_container"></div>
<!-- 加载React. -->
<!-- 注意: 在生产环境部署时, 需要替换 "development.js" 为"production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 加载我们的 React组件. -->
<link rel="stylesheet" href="../dist/css/index.css">
<script src="../dist/index.js"></script>
</body>
</html>
网友评论