react中webpack配置

it2025-03-26 4

webpack使用前的基础知识

webpack使用版本：3.10.0

需要处理文件类型

Html：html-webpack-plugin脚本：babel + babel-preset-react样式：css-loader + sass-loader图片/字体：url-loader + file-loader

webpack常用模块

html-webpack-plugin，html单独打包成文件extract-text-webpack-plugin，样式打包成单独文件CommonsChunkPlugin：提出通用的模块（webpack自带）

webpack-dev-server

为webpack项目提供Web服务使用版本：2.9.7更改代码自动刷新，路径转发

webpack配置流程

初始化yarn和git，配置gitignore和readme安装webpack：yarn add webpack@3.10.0 --dev在根目录创建webpack.config.js，进行如下配置 const path = require('path'); module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' } };

根目录创建src文件，在src文件下创建入口文件app.js（这一步创建的文件名以及文件目录和上面webpack.config.js中进行的配置相匹配即可）

此时执行npx webpack即可进行最基本的打包工作

处理html文件的配置执行yarn add html-webpack-plugin@2.30.1 --dev

在webpack.config.js中添加plugins的配置项，如下

在src目录下创建index.html作为模板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>react-template</title> </head> <body> <div id="app"></div> </body> </html>

处理脚本执行yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev 在webpack.config.js添加module

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env'] } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };

react的处理执行yarn add babel-preset-react@6.24.1 --dev 和 yarn add react@16.2.0 react-dom@16.2.0 在babel的preset中添加'react'

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };

处理css 执行yarn add style-loader@0.19.1 css-loader@0.28.1 --dev 在webpack.config.js中添加css匹配rules

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader', ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };

优化css加载执行yarn add extract-text-webpack-plugin@3.0.2 --dev 修改css的rules

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new ExtractTextPlugin("index.css") //打包后的文件目录(名) ] };

处理图片执行yarn add file-loader@1.1.6 url-loader@0.6.2 --dev 添加图片处理项

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, module: { rules: [ // babel配置 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, // css配置 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, // 图片配置 { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new ExtractTextPlugin("index.css") //打包后的文件目录(名) ] };

处理文字添加配置项

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, module: { rules: [ // babel配置 { test: /\.m?js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, // css配置 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, // 图片配置 { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], }, // 字体图标配置 { test: /\.(eot|svg|ttf|woff|woff2|otf)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], }, ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new ExtractTextPlugin("index.css") //打包后的文件目录(名) ] };

提出公共模块，优化dist目录

安装webpack-dev-server 执行yarn add webpack-dev-server@2.9.7 --dev

添加脚本在package.json的script中进行如下配置

"scripts": { "dev": "node_modules/.bin/webpack-dev-server", "dist":"node_modules/.bin/webpack -p" },

首页的自动跳转在weboack.config.js中进行devServer的配置

最新回复(0)