创建项目文件夹：
$ mkdir my-program
$ cd my-program
webpack默认是以src下的index文件作为入口文件的。
$ mkdir src/index.js
输出文件默认是dist/main.js
安装webpack ：$ npm install webpack --save-dev
安装webpack-cli:$ npm install webpack-cli --save-dev
然后我们可以试着打包 ：$ webpack
会出现
bash: webpack: command not found 你需要只能装全局的webpack包
Mac ：$sudo npm install webpack -g
再次运行会出现：
你需要安装全局的webpack-cli: $sudo npm install webpack-cli -g
再次运行：$webpack
打包成功出现黄色警告。
这是因为缺少mode 。
加上：$webpack --mode production
打包成功，无黄色警告。
在使用热更新的时候一定注意要加：
webpack-dev-server --mode development （--output-public-path dist 不然不会跟新页面）
加载样式需要 :$npm install style-loader css-loader -D
在使用样式时：
不能再向以前一样直接使用 import './css/index.css'
下面直接用你定义的类名使用。
这样会导致类名出现，样式不起作用。
正确的用法：
impor styleObj from './css/index.css'
<div className={styleObj.hello}></div>
加载图片需要：$npm install file-loader url-loader -D
配置文件代码：
module.exports = {
mode: 'development',
devServer: {
inline:true,
port: 8080
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use:{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {}
}]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader?modules' },
]
},
]
}
}
index.js文件：
import React from 'react'
import ReactDOM from 'react-dom'
import Rose from './../img/WechatIMG2.png'
import mycss from './css/index.css'
class App extends React.Component {
render () {
return (
<div className={mycss.hello}>
你好中国年
<img src={Rose} alt='玫瑰' />
是不是对你陈诺了太多还是11ß
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
index.css:
.hello{
width: 40px;
background-color: red;
color: red;
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">123</div>
<script src="./dist/main.js"></script>
</body>
</html>
到此我们就得到一个有图片有样式的react demo
