- 項目創(chuàng)建
創(chuàng)建一個文件夾，進入到該目錄，執(zhí)行npm init。所有的提示內(nèi)容均可以跳過，執(zhí)行完之后，目錄中會多一個package.json文件，該文件為核心文件，包含包依賴管理和腳本任務(wù)。
mkdir webpack-demo
cd webpack-demo
npm init
- 安裝react，react-dom,webpack
--save的含義是項目上線運行所需要的包(生產(chǎn)環(huán)境)
--save-dev是開發(fā)環(huán)境所需要的包
npm install react react-dom --save
npm install webpack@3.8.1 --save-dev -g
(配置3.0+的webpack，全局安裝webpack)
- 項目目錄
目錄.png
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="bundle.js"></script>
</body>
</html>
- index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
render(
<div>Hello React!</div>,
document.getElementById('app')
);
- webpack.config.js
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'), //指定入口文件，程序從這里開始編譯,__dirname當(dāng)前所在目錄, ../表示上一級目錄, ./同級目錄
output: {
path: path.resolve(__dirname, './dist'), // 輸出的路徑
filename: 'bundle.js' // 打包后文件
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
}
},
exclude: /node_modules/
}
]
}
}
- 執(zhí)行打包
1. webpack --config webpack.config.js
執(zhí)行打包之后會報出如圖(缺少依賴.png)錯誤。
因為我們使用了react，react是使用jsx語法實現(xiàn)的，而jsx不能直接被瀏覽器識別和執(zhí)行，所以這里需要引入Babel庫進行轉(zhuǎn)碼。
2. npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save
3. 再次執(zhí)行webpack --config webpack.config.js
會報出如圖(版本錯誤.png)錯誤，babel-core和babel-loader版本對不上
缺少依賴.png
版本錯誤.png
- 簡單的優(yōu)化
1. index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render((<App />), document.getElementById('app'));
2. 新建.babelrc文件，提取babel配置
{
"presets": [
"es2015",
"react"
]
}
3. 修改webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
4. 在src下新建App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>Hello React!</div>
);
}
}
export default App;
- 以腳本的方式構(gòu)建
修改package.json，加入自定義腳本，在項目根目錄執(zhí)行npm run dev即可達到上面一樣的效果。
"scripts": {
"dev": "webpack --config webpack.config.js"
}
- 搭建前端服務(wù)器
webpack-dev-server是一個小型的靜態(tài)文件服務(wù)器，為webpack打包的資源文件提供Web服務(wù)。
1. 在src下面新建文件webpackDevServer.config.js
'use strict'
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');
const webpack = require('webpack');
const path = require('path');
const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
contentBase: path.resolve(__dirname, './dist'), //默認會以根文件夾提供本地服務(wù)器，這里指定文件夾
historyApiFallback: true, //在開發(fā)單頁應(yīng)用時非常有用，它依賴于HTML5 history API，如果設(shè)置為true，所有的跳轉(zhuǎn)將指向index.html
port: 3000, //如果省略，默認8080
publicPath: "/"
});
server.listen(3000, 'localhost', function (err) {
if (err) throw err
})
2. 更新package.json
"scripts": {
"dev": "node webpackDevServer.config"
}
?。?！注意webpack-dev-server的版本問題，不然會報出如下錯誤。
webpack-dev-server版本問題.png
到此已經(jīng)使用webpack搭建好簡單的React開發(fā)環(huán)境。??????
