从0搭建React开发环境

{

// …

“scripts”: {

“build”: “webpack --mode=development --config script/webpack.config.js”

},

}

然后根目录终端输入：npm run build

在浏览器中打开 dist 目录下的 index.html，如果一切正常，你应该能看到以下文本：'React'

index.html 目前放在 dist 目录下，但它是手动创建的，下面会教你如何生成 index.html 而非手动编辑它。

Webpack 核心功能

---

Babel

$ npm install @babel/cli @babel/core babel-loader @babel/preset-env --save-dev

script/webpack.config.js

module.exports = {

// …

module: {

rules: [

{

test: /.(js|jsx)$/,

loader: “babel-loader”,

exclude: /node_modules/,

},

],

},

};

.babelrc

在根目录下添加 .babelrc 文件：

{

“presets”: [“@babel/preset-env”, “@babel/preset-react”]

}

样式

$ npm install style-loader css-loader less less-loader --save-dev

script/webpack.config.js

module.exports = {

// …

module: {

rules: [

{

test: /.(css|less)$/,

use: [

{

loader: “style-loader”,

},

{

loader: “css-loader”,

options: {

importLoaders: 1,

},

},

{

loader: “less-loader”,

lessOptions: {

javascriptEnabled: true,

},

},

],

},

],

},

};

图片字体

$ npm install file-loader --save-dev

script/webpack.config.js

module.exports = {

// …

module: {

rules: [

{

test: /.(png|svg|jpg|gif|jpeg)$/,

loader: ‘file-loader’

},

{

test: /.(woff|woff2|eot|ttf|otf)$/,

loader: ‘file-loader’

}

],

},

};

HTML

$ npm install html-webpack-plugin --save-dev

script/webpack.config.js

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {

// …

plugins: {

html: new HtmlWebpackPlugin({

title: ‘tristana’,

template: ‘public/index.html’

}),

}

};

index.html

tristana

开发服务

$ npm install webpack-dev-server --save-dev

script/webpack.config.js

const path = require(“path”);