共计 5382 个字符，预计需要花费 14 分钟才能阅读完成。
先来说说 react 搭建：1 官方文档上也有提供直接下载 react 包，但是修改 webpack 配置比较麻烦
npx create-react-app my-app
cd my-app
npm start
修改 webpack 配置需要执行
npm run eject
2 自行搭建一个项目并且配置 webpack– 主要记录学习阶段～总结的可能不太好，勉强看看，重点记录一下第二种的方式
通过 yarn 管理包
下载 yarnyarn 官网链接安装步骤都有的
在项目目录下，执行 yarn init 会出现我们的 package.json 文件
安装 webpackyarn add webpack –dev
新建 webpack.config.js 文件，
贴官网示例:
const path = require(‘path’);
module.exports = {
entry: ‘./src/app.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘app.js’
}
};
命令行执行 webpack 会发现 dist 目录 注意：yarn 安装过程中如果出错，尝试将 yarn 切换到淘宝镜像再进行下载哦～，我安装过程中出现过问题，切到这就没问题了 yarn config set registry ‘https://registry.npm.taobao.org’
安装 html-webpack-plugin
yarn add html-webpack-plugin –dev
文档使用链接地址 按照文档操作，修改 webpack.config.js 使用 html-webpack-plugin 打包 html 文件 再次执行 webpack 命令，会发现 dist 文件夹下面多了一个 index.html 设置 html-webpack-plugin 的 template 模版, 在 src 新建 index.html, 并且设置 html 内容
const path = require(‘path’);
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: ‘./src/app.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘app.js’
},
plugins: [new HtmlWebpackPlugin(
{
template:’./src/index.html’
}
)]
};
现在 dist 文档下面的 index.html 就是当前 src 下的 index.html 的模版了
安装 babelyarn add babel-loader @babel/core @babel/preset-env
具体详情见文档地址 在 src/app.js 中写入一些 ES6 语法，再次执行 webpack 命令，dist/app.js 进行了转换
安装 react 转换 babel-preset-react
yarn add babel-preset-react –dev
修改 webpack.config.js
const path = require(‘path’);
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: ‘./src/app.jsx’
path: path.resolve(__dirname, ‘dist’),
filename: ‘app.js’
},
plugins: [new HtmlWebpackPlugin(
{
template:’./src/index.html’
}
)],
module: {
rules: [
{
test: /\.m?jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’,’react’]
}
}
}
]
}
};
安装 react yarn add react react-domreact 添加操作地址详情 将 src/app.js 修改为 app.jsx
import React from ‘react’;
import ReactDOM from ‘react-dom’;
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘app’)
);
再执行 webpack 进行打包 如果出现 Error: Plugin/Preset files are not allowed to export objects, only functions. 错误
说明 babel 的版本不一致，我这边是因为 ”babel-preset-react”: “^6.24.1″ 默认装的 6 版本，其他 babel 安装的是 7 版本，所以统一升级到 7 或者降级到 6
yarn add babel-preset-react@7.0.0 –dev
这样在进行打包，就可以了，这个时候打开 dist/index.html 我们看到 hello, world! 说成功编译了 react
安装 style-loader
yarn add css-loader style-loader –dev 安装地址操作详情 在 webpack.config.js 的 rules 中添加
{
test: /\.css$/,
use: [‘style-loader’, ‘css-loader’],
},
在 src 下新建一个文件 index.css，随便修改一点样式
h1{
color:#F00;
}
在 app.jsx 中引入
import ‘./index.css’
再次执行 webpack 打包，刷新 dist/index.html
安装 ExtractTextWebpackPlugin 插件将 css 独立到单独的文件
yarn add extract-text-webpack-plugin –dev
官网链接地址
const path = require(‘path’);
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const ExtractTextPlugin = require(“extract-text-webpack-plugin”);
module.exports = {
entry: ‘./src/app.jsx’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘app.js’
},
module: {
rules: [
{
test: /\.m?jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’,’react’]
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: “style-loader”,
use: “css-loader”
})
},
]
},
plugins: [
new HtmlWebpackPlugin(
{
template:’./src/index.html’
}
),
new ExtractTextPlugin(“index.css”),
],
};
webpack.config.js 配置如上 再次执行 webpack，dist 目录下就多了一个 index.css 了～ 注意：打包遇到 Tapable.plugin is deprecated. Use new API on .hooks instead 错误，原因是 extract-text-webpack-plugin 目前版本不支持 webpack4 执行：yarn add extract-text-webpack-plugin@next –dev
安装 sass-loader
yarn add sass-loader –dev
在 webpack.config.js 中 rules 添加
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: ‘style-loader’,
use: [‘css-loader’, ‘sass-loader’]
})
}
新建一个 index.scss 文件
body{
background: #ccc;
#app{
font-size: 22px;
}
}
在执行 webpack 会出现报错 Cannot find module ‘node-sass’ 查看文档链接 需要安装 node-sass
yarn add node-sass –dev
打包，查看 index.html 可以看到样式应用上去了～
安装 url-loader 处理图片链接
yarn add url-loader file-loader –dev
官网地址 在 rules 中加入：
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192
}
}
]
}
项目中引入图片，进行打包，这样图片资源也打包解析进去了～
添加解析字体 rule
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192,
name:’resource/[name].[ext]’
}
}
]
},
添加 webpack-dev-server
yarn add webpack-dev-server –dev
修改 package.json 添加 “scripts”: {“test”: “echo “Error: no test specified” && exit 1″, “watch”: “webpack –watch”, “start”: “webpack-dev-server –open”, “build”: “webpack-cli”} 执行 yarn run start 启动项目
yarn run build 打包项目
最后附上当前为止修改后的 webpack.config.js
const path = require(‘path’);
const webpack = require(‘webpack’);
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const ExtractTextPlugin = require(“extract-text-webpack-plugin”);
module.exports = {
entry: ‘./src/app.jsx’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘./js/[name].[hash].js’,
chunkFilename: ‘./js/[name].[hash].js’,
},
devServer: {
port: 8080,
proxy: {
‘/expo’: {
target: ‘https://xxx’,
changeOrigin: true,
pathRewrite: {
‘/expo’: ‘/expo’,
},
secure: false,
},
},
hot:true
},
module: {
rules: [
{
test: /\.m?jsx$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’,’react’]
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: “style-loader”,
use: “css-loader”
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: ‘style-loader’,
use: [‘css-loader’, ‘sass-loader’]
})
},
{
test: /\.(png|jpg|gif|ico|jpeg)$/i,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192,
name: “[name].[ext]”,
publicPath: “../images/”,
outputPath: “images/”
}
}
]
},
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
use: [{
loader: “file-loader”,
options: {
name: “[name].[ext]”,
publicPath: “../fonts/”,
outputPath: “fonts/”
}
}]
},
]
},
plugins: [
new HtmlWebpackPlugin(
{
template:’./src/index.html’
}
),
new ExtractTextPlugin(“css/[name].css”),
],
optimization:{
splitChunks:{
name:’common’,
filename:’js/base.js’
}
}
};