Why Webpack?
- 兼容 CommonJS & AMD & ES6 模組規範
- Bundle 效率高
- JS 擴充語法的編譯自動化 (JSX, Coffee Script, TypeScript…)
- 編譯 sass, less
- 將資源 (css, img, font…) 包入 JS 內
- JS 程式碼分散封裝
- 可用的擴充 plugin 很多
为什么有本攻略
因为网上有很多入门的攻略,不简单易懂,导致很多时候都无法直接运行,又或者攻略版本太低,有一些包太旧不兼容等等。
create-react-app
教程基于上一篇文章 使用create-react-app构建你的第一个react应用
- 请确保安装了正常得基础包
- 然后找个项目目录执行
create-react-app react-webpack-starter
脚手架 - 生成一个
react-webpack-starter
项目,并cd到项目下cd /d C:\workspace\React\react-webpack-starter
- 删除目录下的所有html和js的demo文件,开始下文教程
Install Webpack
- cd到项目目录下,直接安装即可,这个是安装到系统下得,供往后可以以webpack命令打包
cnpm i webpack webpack-cli -g
- 这个是安装到项目依赖里面去,也就是在
node_mudule
里面
npm i --save-dev webpack webpack-dev-server webpack-cli
- 安装必要得依赖
npm i --save-dev babel-core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin
以下为网上的旧版1.0得教程,已经不需要,或者说不用这么多.
cnpm install webpack-dev-server style-loader css-loader babel-loader file-loader sass-loader less-loader url-loader --save-dev
package.json
- 检查package里面的devDependencies,确保版本大致一样.
"devDependencies": {
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
}
- 在
scripts
下新增一个"start":"webpack-dev-server --mode development --open --hot"
和"buile": "webpack --mode production"
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"buile": "webpack --mode production"
},
webpack.config.js
再根目录新建一个webpack.config.js
文件,copy以下已经优化的内容
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//by https://blog.csdn.net/moshowgame
//当entry是个数组的时候,里面同样包含入口js文件,另外一个参数可以是用来配置webpack提供的一个静态资源服务器,webpack-dev-server。webpack-dev-server会监控项目中每一个文件的变化,实时的进行构建,并且自动刷新页面:
//当entry是个对象的时候,我们可以将不同的文件构建成不同的文件,按需使用,比如在我的hello页面中只要\引入hello.js即可:
entry: './src/index.js',
//打包後生成的檔案路徑
output: {
path: path.join(__dirname, 'dist'),
filename: 'index_bundle.js'
},
//自动补全,后缀可以省略不写
//webpack在构建包的时候会按目录的进行文件的查找,resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀:
//onfiguration.resolve.extensions[0] should be an non-empty string.A non-empty string .请把[]中得''去掉
resolve: {
extensions: ['.js', '.jsx', '.css', '.scss', '.json'],
alias: {
//配置后可以直接用@来表示这个位置,直接应用目录下得文件,是绝对路径
'@': path.join(__dirname, './src')
}
},
//設置 eval 或 SourceMap 屬性,debug 用
//devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{
//自動編譯 JSX 或 JS 檔 (require 可載入 JSX 了)
test: /\.(js|jsx)$/,
use: { loader: 'babel-loader' },
exclude: /node_modules/
}
//, {
// //自動處理 CSS 內的 url 和 @import 的路徑轉換,可以傳入 sourceMap 參數以便 debug
// test: /\.css$/,
// loader: 'style!css?sourceMap'
// }, {
// //自動編譯 sass 檔成 CSS (require 可載入 sass 了),可以傳入 sourceMap 參數以便 debug
// test: /\.scss$/,
// loader: 'style!css?sourceMap!sass?sourceMap'
// }, {
// //自動編譯 less 檔成 CSS (require 可載入 less 了),可以傳入 sourceMap 參數以便 debug
// test: /\.less$/,
// loader: 'style!css?sourceMap!less?sourceMap'
// }, {
// //自動將圖片轉成 Data URL
// test: /\.(jpe?g|JPE?G|png|PNG|gif|GIF|svg|SVG|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/,
// loader: 'url?limit=1024&name=[sha512:hash:base64:7].[ext]'
// }
]
},
plugins: [
//https://github.com/jantimon/html-webpack-plugin
//This will generate a file dist/index.html and autp-import index_bundle.js
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
})
]
}
.babelrc
根目录新增一个.babelrc
文件,输入以下内容
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
src目录
- 新增
index.html
文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<p>welcome to react-world</p>
<div id="root"></div>
</body>
</html>
- 新增一个
index.js
文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from '@/components/App';
ReactDOM.render(<App />, document.getElementById('root'));
- 新建一个
components
目录,并新增App.js
文件
import React from 'react';
export default function App (){
return(<div>
<h1>My React App</h1>
</div>)
}
运行webpack
double confirm目录结构正确,配置完成之后,就可以直接通过npm start
进行启动了,默认地址http://localhost:8080/
。
npm start
当然,前提是没有错误,看到Compiled successfully.
就对了.
可以看到,项目其实是以我们前面在package.json
里面配置的webpack-dev-server --mode development --open --hot
方式运行,也就是说我们运行npm start
后,程序自动转换为运行webpack-dev-server --mode development --open --hot
react-webpack-starter@0.1.0 start C:\workspace\React\react-webpack-starter
webpack-dev-server --mode development --open --hot
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from C:\workspace\React\react-webpack-starter
i 「wdm」: wait until bundle finished: /
i 「wdm」: Hash: xxxxxxx
......
i 「wdm」: Compiled successfully.
系统会自动跳转访问http://localhost:8080/
(如果没有,请手动),如果要退出,直接ctrl+c
终止批处理即可。
开源项目
https://github.com/moshowgame/react-study
本教程作为react-study
的子项目react-webpack-starter
,代码已经全部上传,建议按照教程来一遍,有什么不懂再参考。