項目結構
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="index"></div>
<!-- 測試打包後的註釋是否還在 -->
<script src="index.bundle.js" ></script>
</html>
========================================================================================
demo1.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="demo1"></div>
<script src="demo1.bundle.js"></script>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("index")
)
=====================================================================================
demo1.jsx
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("demo1")
)
webpack.config.js配置
var webpack = require('webpack');
var path = require('path');
//用於打包html文件 webpack本身無法打包html
var htmlWebpackPlugin = require('html-webpack-plugin');
//用於在構建前清除dist目錄中的內容
const CleanWebpackPlugin = require('clean-webpack-plugin');
//打包html
function bundleHtml(x, y) {
return new htmlWebpackPlugin({
//指定要打包的html的文件 路徑的默認前綴是context屬性值 即__dirname + '/src' + x
template: x,
//指定輸出路徑和文件名 路徑的默認前綴是output.path屬性值 即__dirname + '/dist/' + y
filename: y,
//不在打包後的html中引入js
inject: false,
minify: {
removeComments: true, //去掉註釋
// collapseWhitespace: true, //去掉空行
}
})
}
module.exports = {
context: __dirname + '/src', //這裏表示入口，__dirname表示當前目錄
entry: {
index: './index.js',
demo1: "./demo1/demo1.jsx"
}, //這裏是入口文件
mode: 'development', //這裏表示開發模式，開發模式下webpack打包之後代碼不壓縮
module: {
rules: [ //在webpack3+以上的版本使用rules
{
test: /(\.jsx|\.js)$/,
exclude: /(node-modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
output: { //這裏是出口
path: __dirname + '/dist/', //出口文件夾
filename: '[name]/[name].bundle.js' //出口打包後的文件名
},
plugins: [
//清除dist構建目錄文件
new CleanWebpackPlugin(['dist']),
bundleHtml("index.html", "index/index.html"),
bundleHtml("./demo1/demo1.html", "demo1/demo1.html")
],
devServer: {
contentBase: "./dist",//本地服務器所加載的頁面所在的目錄
historyApiFallback: true//不跳轉
}
}
package.json配置
跳轉鏈接查看 webpack與webpack-dev-server的區別
{
"name": "react_study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --watch",
"server": "webpack-dev-server --content-base src --inline --hot --open"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^8.0.0",
"clean-webpack-plugin": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}