不用脚手架,手把手教你用Webpack配置React/Vue项目
React/Vue这些框架在创建项目的过程中,为了降低使用者Webpack的学习成本,更加关注业务本身,所以都提供了相应的脚手架(create-react-app,@vue/cli或者create-vue)来快速初始化项目,React默认隐藏掉了webpack的相关配置,可以通过npm run eject方式暴露出来,Vue也默认隐藏了webpack,并且不提供暴露接口,只能通过vue.config.js来修改配置。
作为一个认真学习的前端攻城师,小墨觉得有必要去了解webpack是如何配置React/Vue项目的,在此过程中也能加深对脚手架如何整合webpack的理解,接下来跟着小墨一起一步步着手配置吧。
咱们先从React开始配置:
React项目配置
在开始创建项目之前,先在本地安装nodejs,最好安装最新的稳定版本,包管理器可以直接用node自带的npm,也可以安装yar或者其他工具,小墨在这直接使用npm了~
1. npm初始化项目
- mkdir react-webpack-myapp
- cd react-webpack-myapp
- npm init - y
安装webpack和webpack-cli
终端命令: npm install -D webpack webpack-cli
2. 开始配置
根目录下创建webpack.config.js,先配置一下模式mode,其他配置后面慢慢完善。
//webpack.config.js
module.exports = {
mode: 'development'
}
创建src目录,并新建index.js
//src/index.js
console.log('Welcome to myapp');
先执行打包命令看看有没有问题:
终端命令: npx webpack
终端控制台显示打包成功并生成了dist/main.js, 说明没问题,咱们继续~
为了让应用能在浏览器中展示,我们需要安装 webpack-dev-server 和 html-webpack-plugin:
终端命令: npm install -D webpack-dev-server html-webpack-plugin
在根目录下新建: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>myapp</title>
<body>
<div id="root"></div>
</body>
</html>
继续配置 webpack.config.js
//webpack.config.js
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devServer: {
open: true,
port: 3000
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
})
]
}
启动本地服务:
终端命令: npx webpack serve
浏览器自动打开localhost:3000 访问页面,我们打开浏览器控制台,可以看到打印: Welcome to myapp
为了方便后续执行命令方便,我们在package.json里面声明运行脚本:
//package.json
{
name: "react-webpack-myapp",
...
"script": {
"dev": "NODE_ENV=development webpack serve",
"build": "NODE_ENV=production webpack build"
}
}
在webpack.config.js 接收一下NODE_ENV参数:
//webpack.config.js
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
mode: isProduction? 'production' : 'development',
devServer: {
open: true,
port: 3000
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
})
]
}
配置好了,后续我们直接终端执行 npm run dev 或 npm run build 即可。
3. Javascript 处理
js 主要通过babel相关的库来处理,我们先安装:
终端命令: npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react @bable/plugin-transform-runtime
- @babel/core: babel的核心库,必须安装
- @babel/preset-env: 转译ES6+ 代码到一个向下兼容的版本,并可以指定兼容哪些特定的环境
- @babel/preset-react: 转译react语法
- @bable/plugin-transform-runtime: 帮助babel减少重复代码,缩小资源体积
根目录下新建 babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
module: false
}
],
'@babel/preset-react'
],
plugins: [
'@babel/plugin-transform-runtime'
]
}
webpack.config.js 添加处理.js和.jsx的规则:
//webpack.config.js
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
resolve: {
extensions: ['.js', '.jsx'] //引用的时候自动识别
},
mode: isProduction? 'production' : 'development',
devServer: {
open: true,
port: 3000
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
})
]
}
安装React相关:
终端命令: npm install -D react react-dom
修改index.js为index.jsx,编写react逻辑:
//src/index.js
import React from "react";
import ReactDom from "react-dom";
const App = () => (
<div>Hello React App!</div>
);
ReactDom.render(
<App />,
document.getElementById('root')
);
运行终端命令: npm run dev
浏览器页面中应该出现: Hello React App!
4. Typescript 处理
安装Typescript相关:
终端命令: npm install -D ts-loader typescript @types/react @types/react-dom
根目录新建tsconfig.json配置文件:
//tsconfig.json 推荐配置
{
"compilerOptions": {
"outDir": "./dist", //webpack的output配置了,这里不写也可
"module": "es6",//以es6的方式引入 import
"target": "es5",//打包成es5
"jsx": "react", // jsx编译器指定react
"allowJs": true,//允许ts里面引入js模块
},
"exclude": [
"node_modules" //排除
],
"include": [
"src" //只在src生效
]
}
webpack.config.js添加 typescript相关配置
//webpack.config.js
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
entry: './src/index.tsx',
resolve: {
extensions: ['.js', '.jsx', 'tsx']
},
mode: isProduction? 'production' : 'development',
devServer: {
open: true,
port: 3000
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
})
]
}
将src/index.jsx修改为index.tsx, 添加tyepscript内容:
//src/index.tsx
import React from "react";
import ReactDom from "react-dom";
type Fruits = {
id: number;
name: string;
desc: string;
}
const coconut: Fruits {
id: 1001,
name: '椰子',
desc: '椰子描述....'
}
const App = () => (
<div>
<h1>{coconut.name}</h1>
<p>{coconut.desc}</p>
</div>
);
ReactDom.render(
<App />,
document.getElementById('root')
);
重启webpack本地服务,typescript代码能正常编译,代表成功了,继续后续配置~
5. css/sass 处理
安装相关loader:
终端命令: npm install -D sass sass-loader css-loader style-loader mini-css-extract-plugin
解释一下这些包的作用:
- sass-loader: 将sass语法转换为css语法;
- css-loader: 解决css语法中的外部引用, 如@import, url()等;
- style-loader: 将样式通过style标签的形式插入页面;
- mini-css-extract-plugin: 将样式提取为css文件,因为暂时不支持模块热更新,所以一般只在生产环境中使用,开发环境还是使用style-loader。
接下来继续添加webpack.config.js配置:
//webpack.config.js
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
entry: './src/index.tsx',
resolve: {
extensions: ['.js', '.jsx', 'tsx', 'scss']
},
mode: isProduction? 'production' : 'development',
devServer: {
open: true,
port: 3000
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.(sa|sc)ss$/,
// 编译sass到css
use: [
isProduction ? MiniCssExtractPlugin.loader: 'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html'
}),
// 判断一下环境
isProduction ? new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].chunk.css'
}): null
].filter(Boolean)
}
src 下面创建styles目录,新建style.scss
// src/styles/style.scss
body {
h1{
color: green;
}
}
在index.tsx中引入 style.scss
//src/index.tsx
import React from "react";
import ReactDom from "react-dom";
import './styles/style';
//...
重启启动: npm run dev, 看看标题颜色是否已变成绿色,代表配置成功~
6. 多页面配置
大多数项目功能不多的话都是spa框架,有些大型项目按功能模块区分,用了mpa多页面框架,下面就介绍一下webpack怎么配置多页面(多个入口)。
src目录下面新建 list.tsx文件:
// src/list.tsx
import React from "react";
import ReactDom from "react-dom";
import './styles/style';
const App = () => {
<h1>list page...</h1>
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
webpack.config.js多加入口,同时新增list页面的HtmlWebpackPlugin实例化:
//webpack.config.js
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
//新增入口
entry:{
index: './src/index.tsx',
list: './src/list.tsx'
},
resolve: {
extensions: ['.js', '.jsx', 'tsx', 'scss']
},
mode: isProduction? 'production' : 'development',
devServer: {
open: true,
port: 3000
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.(sa|sc)ss$/,
use: [
isProduction ? MiniCssExtractPlugin.loader: 'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
chunks: ['index'],
}),
//新增实例
new HtmlWebpackPlugin({
filename: 'list.html',
template: 'index.html',
chunks: ['list'],
}),
isProduction ? new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].chunk.css'
}): null
].filter(Boolean)
}
执行 npm run build, 在dist目录下面分别生成了index.js和list.js, 以及相对应的index.html和list.html页面,代表配置OK~
细心观察会发现,这2页面公用的react和react-dom 被打包了2遍,到时候会加载2遍,接下来我们优化一下, 还是在webpack.config.js下面做修改:
//webpack.config.js
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
// 修改入口配置
entry:{
index: {
import: './src/index.tsx',
dependOn: 'vendor'
},
list: {
import: './src/list.tsx',
dependOn: 'vendor'
},
vendor: ['react', 'react-dom']
},
resolve: {
extensions: ['.js', '.jsx', 'tsx', 'scss']
},
mode: isProduction? 'production' : 'development',
devServer: {
open: true,
port: 3000
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.(sa|sc)ss$/,
use: [
isProduction ? MiniCssExtractPlugin.loader: 'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
//新增 chunks
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
chunks: ['vendor', 'index'],
}),
new HtmlWebpackPlugin({
filename: 'list.html',
template: 'index.html',
chunks: ['vendor', 'list'],
}),
isProduction ? new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].chunk.css'
}): null
].filter(Boolean)
}
执行 npm run build 命令, 在dist目录下新增 vendor.js, 文件里面包含了react和react-dom的内容, index.html和 list.html 共同访问vendor.js, 同时 index.js和list.js体积也小了很多,基本上只包含了自身的代码,大大提升了加载速度。
到目前为止,React的使用基本配置完成,接下来再介绍一下Vue的配置流程~
Vue项目配置
Vue 的配置大部分跟上面的 React 相同, 所以碰到一样的配置这里就不过多的赘述,侧重点在Vue本身语法解析和其他插件的配合使用。
1. 新建项目
- mkdir vue-webpack-myapp
- cd vue-webpack-myapp
- npm init - y
安装webpack相关:
终端命令: npm install -D webpack webpack-cli webpack-dev-server
安装vue相关:
终端命令: npm install -D vue vue-loader
安装其他loader及插件:
终端命令: npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime sass-loader css-loader vue-style-loader mini-css-extract-plugin html-webpack-plugin
vue相关的2个包vue和vue-loader:
vue 是核心代码, vue-loader 负责支持SFC(Single-File Component, 单文件组件)的特性,主要工作是将SFC中不通过的代码块分割下来,交给loader处理;比如script代码块交给babel-loader处理, style代码交给css-loader处理等。
2. 开始配置
下面看看scss样式这块的配置规则
//webpack.config.js
module.xeports = {
//...
module:{
rules; [
{
test: /\.scss$/,
use: [
'vue-style-loader', //这里跟react有区别
'css-loader',
'sass-loader'
]
}
]
}
}
vue-style-loader 能识别出,组件代码中指定的sass样式:
<style lang='scss' >
</style>
并且能寻找到带有.scss后缀的文件,交给webpack处理成对应的style源码
下面展示完整的webpack配置:
//webpack.config.js
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require('vue-loader'); //新增
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
entry: './src/index.js',
output: {
//生产环境加hash,可以利用长效缓存
chunkFilename: isProduction ? '[name][chunkhash:8].chunk.js': '[name].chunk.js',
filename: isProduction ? '[name][contenthash:8].js': '[name].js'
},
resolve: {
extensions: ['.js', '.vue'] ,
alias: {
vue$: 'vue/dist/vue.runtime.esm.js'
}
},
mode: isProduction? 'production' : 'development',
devServer: {
open: true,
port: 3000
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.vue$/,
use: 'vue-loader',
},
{
test: /\.(sa|sc)ss$/,
use: [
isProduction ? MiniCssExtractPlugin.loader: 'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin(), //新增
new HtmlWebpackPlugin({
template: 'index.html',
}),
isProduction ? new MiniCssExtractPlugin({
filename: '[name][contenthash:8].css',
chunkFilename: '[name][contenthash:8].chunk.css'
}): null
].filter(Boolean)
}
上面的配置,vue-loader 出了作为loader本身使用外,还需要导入它的VueLoaderPlugin实例。
在resolve中,我们加了alia的规则来使用esm版本,这样可以让webpack更有效的处理tree-shaking(去除死代码)。
3. 业务代码
根目录下面新建index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>myapp</title>
<body>
<div id="app"></div>
</body>
</html>
创建src目录,新增src/index.js 和 App.vue:
// src/index.js
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app')
// App.vue
<template>
<div class="container">
<h1>Hello vue app...</h1>
</div>
</template>
<script>
export default {
name: 'App',
components: {}
}
</script>
<style lang="scss">
.container{
h1{
color: red;
}
}
</style>
在package.json中添加声明指令:
{
...
"scripts": {
"dev": "NODE_ENV=development webpack serve",
"build": "NODE_ENV=production webpack build"
}
}
执行 npm run dev,浏览器自动打开localhost:3000 页面,看到正常启动说明大功告成了~
结语
这篇文章主要讲解webpack配置React/Vue项目的过程,带着大家一起熟悉React/Vue在webpack中的工作流程,对于用到的loader和plugin没有具体展开的讲,有兴趣的小伙伴可以去官网查看更多更具体的配置项:webpack.js.org/ ,最后祝大家在前端攻城的道路上越走越顺~
转载自:https://juejin.cn/post/7134617082741653511