rewire-webpack 项目教程
1. 项目的目录结构及介绍
rewire-webpack/
├── src/
│ ├── index.js
│ └── ...
├── test/
│ ├── index.test.js
│ └── ...
├── .gitignore
├── package.json
├── README.md
└── webpack.config.js
- src/: 存放项目源代码的目录。
- index.js: 项目的入口文件。
- ...: 其他源代码文件。
- test/: 存放测试文件的目录。
- index.test.js: 入口文件的测试。
- ...: 其他测试文件。
- .gitignore: Git 忽略文件配置。
- package.json: 项目的依赖和脚本配置。
- README.md: 项目说明文档。
- webpack.config.js: Webpack 配置文件。
2. 项目的启动文件介绍
src/index.js
// src/index.js
import './styles.css';
import App from './App';
const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<App />, root);
- import './styles.css': 引入样式文件。
- import App from './App': 引入主应用组件。
- document.createElement('div'): 创建一个 div 元素作为根节点。
- document.body.appendChild(root): 将根节点添加到 body 中。
- ReactDOM.render( , root): 渲染主应用组件到根节点。
3. 项目的配置文件介绍
webpack.config.js
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
- entry: 指定入口文件为
./src/index.js
。 - output: 指定输出目录为
dist
,输出文件名为bundle.js
。 - module.rules: 配置模块加载规则。
- css 文件: 使用
style-loader
和css-loader
。 - js 文件: 使用
babel-loader
,排除node_modules
目录。
- css 文件: 使用
- devServer: 配置开发服务器。
- contentBase: 指定静态文件目录为
dist
。 - compress: 启用 gzip 压缩。
- port: 指定端口号为 9000。
- contentBase: 指定静态文件目录为
以上是 rewire-webpack
项目的基本教程,涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助!