webpack处理react、vue

最新推荐文章于 2024-06-21 09:49:20 发布

小白小白从不日白

最新推荐文章于 2024-06-21 09:49:20 发布

阅读量218

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43285360/article/details/118928789

版权

webpack 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用React框架

接下来我们构建一个React基础环境,在React中我们需要解决的jsx语法问题

安装依赖：

npm install -D @babel/preset-react
npm install -S react
npm install -S react-dom

在配置文件中，我们也需要添加jsx语法的解析

{
    test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须）
    exclude: /node_modules/,//屏蔽不需要处理的文件（文件夹）（可选）
    loader: 'babel-loader',//loader的名称（必须）
}

同时我们需要修改.babelrc文件

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false,
                "targets": {
                    "browsers": [
                        "> 1%",
                        "last 2 versions",
                        "not ie <= 8"
                    ]
                }
            }
        ],
        "@babel/preset-react"
    ]
}

修改主文件，键入React代码

import React from 'react'
import ReactDom from 'react-dom'

class App extends React.Component {
    render(){
        return (
            <div style={{color:"#333"}}>
                Hello
            </div>
        )
    }
}
ReactDom.render(<App/>,document.getElementById("root"))

使用 Vue 框架

Vue 是一个渐进式的 MVVM 框架，相比于 React、Angular 它更灵活轻量。它不会强制性地内置一些功能和语法，你可以根据自己的需要一点点地添加功能。虽然采用 Vue 的项目能用可直接运行在浏览器环境里的代码编写，但为了方便编码大多数项目都会采用 Vue 官方的单文件组件的写法去编写项目。由于直接引用 Vue 是古老和成熟的做法，本书只专注于讲解如何用 Webpack 构建 Vue 单文件组件。

接下来我们配置一下相关环境 css预处理器

npm i -D stylus stylus-loader
npm i -D postcss-loader

预处理器工具

npm i -D autoprefixer

处理html文件

npm i -D html-webpack-plugin

处理vue文件

npm i -D vue vue-loader vue-style-loader vue-template-loader vue-template-compiler

修改webpack.config.js文件

const path = require('path');
const optimizeCss = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')


module.exports = {
    // JavaScript 执行入口文件
    entry: {
        index: "./src/index.js",
        login: "./src/login/login.js"
    },
    // 模式区分：生产和开发环境
    mode: 'development',
    output: {
        // 把所有依赖的模块合并输出到一个 bundle.js 文件
        filename: '[name].js',
        // 输出文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
    },
    module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            },
            {
                test: /\.js$/,
                use: ['babel-loader'],
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            },
            {
                test: /\.styl/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'stylus-loader'
                ]
            }
        ]
    },
    plugins: [
        // css代码压缩
        new optimizeCss(),
        // 单独提取CSS文件
        new MiniCssExtractPlugin({
            filename: "main.css",
            chunkFilename: "[id].css"
        }),
        new VueLoaderPlugin(),
        new HTMLPlugin({
            filename: './public/index.html',
            template: './public/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        hot: true,
        open: true
    },
    resolve: {
        extensions: ['.js', '.json']
    }
};

增加Vue文件`components/hello.vue

<template>
  <div>
      Vue文件环境测试
  </div>
</template>

<script>
export default {
  
}
</script>

<style>

</style>

修改主入口文件index.js如下

import "../assets/css/main.css"
import Vue from 'vue';
import App from './components/hello.vue'; 
new Vue({  
  el: '#root',  
  render: h => h(App)
});

复制index.html入口文件到public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="root"></div>
    <script src="./index.js"></script>
</body>
</html>

同时需要处理css，在项目根目录下创建postcss.config.js

const autoprefixer = require('autoprefixer')
module.exports = {
    plugins:[
        autoprefixer()
    ]
}

小白小白从不日白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack处理react、vue

使用React框架接下来我们构建一个React基础环境,在React中我们需要解决的jsx语法问题安装依赖：npm install -D @babel/preset-reactnpm install -S reactnpm install -S react-dom在配置文件中，我们也需要添加jsx语法的解析{ test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式，这里用来匹配js和jsx文件（必须） exclude:
复制链接

扫一扫