从0开始配置webpack和搭建一个React项目

先来说说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内容

具体详情见文档地址在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’
}
}
};

从0开始配置webpack和搭建一个React项目

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

从0开始配置webpack和搭建一个React项目

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复