1、新建项目目录，初始化npm，新建开发源目录
mkdir webpack-demo2 && cd webpack-demo2
npm init -y
mkdir src2、安装webpack-cli
npm install webpack webpack-cli --save-dev3、在src文件夹下面新建一个index.js 文件，该文件为项目的入口文件
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<h1>Webpack-react</h1>,
document.getElementById('root')
);4、webpack配置文件
在项目根目录新建webpack.config.js文件，此文件为webpack运行核心文件。用于对webpack进行配置。
webpack.config.js 基本配置如下:
const path = require('path');
module.exports = {
entry : './src/index.js',
output : {
filename : '[name].js',
path : path.resolve(__dirname,'dist')
}
}package.json 文件中 scripts脚本配置
"scripts": {
"build": "webpack"
}至此在终端输入 npm run build 就可以执行webpack了，然后webpack会自动去找项目根目录里的webpack.config.js文件，执行打包。
打包后会在跟目录下生成一个dist文件夹，同时文件夹中会有一个main.js文件
5、webpack.config.js module相关配置
webpack 视所有文件都为模块，图片，css文件，字体等静态资源都会打包进js文件，所以会需要用到loader文件，更多Loaders可以查询网址，接下来我们安装一些必要的Loader文件。
npm install style-loader css-loader url-loader --save-devwebpack.config.js中相应配置如下
const path = require('path');
module.exports = {
entry : './src/index.js',
output : {
filename : '[name].js',
path : path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}引入loader后，就可以在你的src/index.js文件import你想引入的css文件或者其他静态资源。
在src文件夹新建一个css文件夹，然后在css文件夹下建一个base.css的css文件，我们来修改index.js文件去使用这个base.css文件
import React from 'react';
import ReactDom from 'react-dom';
import './css/base.css'
ReactDom.render(
<h1 className='topTitle'>很不错哦</h1>,
document.getElementById('root')
);然后在base.css文件中
.topTitle{
color: red
}6、webpack.config.js plugins配置
主要的js文件和静态文件都能成功打包成一个js文件后，我们需要把这个js文件放到html文件里，webpack插件***html-webpack-plugin***就是干这个事儿的，它能自动生成一个html文件并把我们打包好的js文件放入html。
npm install html-webpack-plugin --save-dev然后在webpack.config.js中配置相应的插件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry : './src/index.js',
output : {
filename : '[name].js',
path : path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'production'
})
]
}执行npm run build后，我们可以看到dist目录多出一个index.html文件，这个文件会自动引入webpack打包生成的js文件到里面
7、React 的webpack配置
安装react
npm install react react-dom --save安装react，wepback转换依赖
React组件由JSX组成，浏览器无法识别JSX，需要babel进行转换。
npm i babel-loader @babel/preset-env @babel/preset-react -D.babelrc配置文件
在项目根目录下新建.babelrc文件，此文件为bable核心配置，babel会自动在项目根目录下识别。
.babelrc文件配置如下：
{
"presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}然后在webpack.config.js中的配置module
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}8、html-webpack-plugin 模板配置
我们知道react需要获取页面一个根元素，然后render才会生效，我们可以新建一个html文件，让html-webpack-plugin插件基于这个文件来进项打包。
所以我们在根目录下新建一个html文件，以此文件作模板。
在跟目录下新建一个index.html的模版页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>此时webpack.config.js配置:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry : './src/index.js',
output : {
filename : '[name].js',
path : path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'production',
template:'./src/index.html'
})
]
}书写React，运行webpack
在src的index.js的文件中书写react代码如下
import React from 'react';
import ReactDom from 'react-dom';
import './css/base.css'
ReactDom.render(
<h1 className='topTitle'>很不错哦</h1>,
document.getElementById('root')
);运行npm run build，生成dist目录，打开dist目录中的index.html文件，可以发现浏览器已正常渲染显示了
9、最后说下dev环境热更新配置
上面的步骤已经都完成了，但是每次修改了样式或者修改了布局，都需要重新打包运行才能显示，
webpack-dev-server配置可以帮助我们实现热更新，在开发环境解放我们的生产力。
安装webpack-dev-server
npm install webpack-dev-server --save-dev然后在webpack.config.js中进行配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack');
module.exports = {
entry : './src/index.js',
output : {
filename : '[name].js',
path : path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'production',
template:'./src/index.html'
})
],
devServer:{
contentBase:'./dist',
hot:true
}
}在 package.json 文件 加入 scripts 配置：
"scripts": {
"build": "webpack",
"dev":"webpack-dev-server --open --mode development"
}命令行运行 npm run dev，
至此，react的webpack的基础开发环境已全部配置完毕。
最后附上文件夹完整目录
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
