webpack系列(四):搭建Vue和React

前文：

​ 我在使用webpack的过程中，遇到一个坑，这个坑跟cnpm和npm 有关系，所以当去下载依赖的时候，记得如果用cnpm下载的话，都用cnpm下载就可以，要不然打包和运行的时候很容易会出现bug，当然也可以给node_modules文件夹删掉，重新cnpm i 或 npm i 进行全部下载 都是可以的

一、先简单说下搭建React环境

1. 下载依赖

npm install --save-dev @babel/preset-react
npm insstall react react-dom --save

2.在项目根目录下创建 .babelrc 文件 ，进行配置

{
  "presets": [
    ["@babel/preset-react"]
  ]
}

3. 在webpack.config.js 文件中 配置

注意：如果没有下载babel-loader的话，通过以下命令进行下载

npm install babel-loader --save-dev

module:{
	rules:[
		{
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
		}
	]
}

4. 在js文件中去简单使用React

import React,{Component} from 'react'
import ReactDom from 'react-dom'
class App extends Component {
    render () {
        return <div>Hello 你好</div>
    }
}
ReactDom.render(<App />,document.querySelector('#root'))

4. 运行命令 进行打包,或服务器运行，效果如下：

二、简单搭建Vue环境

1.下载依赖，package.json中一些依赖配置项

如果没有package.json的话，在项目中运行命令 npm init 生成此文件

npm install webpack webpack-cli --save-dev		// 本地安装wepack依赖包

npm install vue vue-loader vue-router vuex --save	// vue需要的一些依赖

npm install vue-template-compiler --save-dev	// vue模板解析

npm install style-loader css-loader sass-loader node-sass 	//css scss解析编译

npm install webpack-dev-server --save-dev	// 简单地web服务器，运行后实时加载

npm install html-webpack-plugin clean-webpack-plugin --save-dev	// 指定html文件自动打包生成到dist目录下以最新的内容形成

npm install --save-dev babel-loader @babel/core	// 下载babel处理Es6语法

图示：

img

2. 在项目根目录下创建webpack.config.js文件，配置如下

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode:'production',
    // 入口文件
    entry: {
        main: './src/main.js'
    },
    // 出口文件
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer:{
        open:true,
        port:8888,
        hot:true,
        contentBase:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.(css|sass|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            },
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    // 配置插件
    plugins: [
        // 打包指定路径的index.html到dist目录
        new HtmlWebpackPlugin({ template: './public/index.html' }),	// 我的index.html在public文件夹下
       // 在打包之前需要对dist目录里的文件进行清除，从而只保留最新的文件
        new CleanWebpackPlugin(),
        // 在最新版，必须加载此插件，vue才能打包
        new VueLoaderPlugin()
    ],
    // 解決文件大小超出警告
    performance: {
        hints: "warning", // 枚举
        maxAssetSize: 30000000, // 整数类型（以字节为单位）
        maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
        assetFilter: function (assetFilename) {
            // 提供资源文件名的断言函数
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');

        }
    },
}

3. 项目 根目录下创建.babelrc 文件,配置如下：

{
  "presets": ["@babel/preset-env"]
}

注意：我这里只是简单地配置了一下babel，至于想配置更多的话，可以找到我的上一篇文章，或者去babel官网查询，官网的文档特别详细，可以去看看英文版的

4. 创建src目录

目录存放我们的vue代码，结构如下：

• 关于src这个目录的结构，相信大家都很熟悉了，这里就不细致说了，跟我们用vue脚手架创建后的结构差不多

• 关于我的index.html 我是在public文件夹中存放的，这里的结构类似于Vue3.x,不过肯定是没有那么全，我现在只是简单地一个搭建，能够让vue代码正常跑起来，至于更多的优化，可以查看webpack官方文档和vue-cli官方文档

5. 最后放一张我的整个项目结构图：

想看代码的，可以查看我的github仓库，进行下载：
https://github.com/923023913/webpack_vue

这样简单地一个vue项目就搭建成功了，只是我也是初学这个webpack，所以其中有些不足，大神们可以通过我的链接，对我的仓库代码进行修改，谢谢了！！！