使用Webpack配置React和Vue開發環境【超實用】

時間 2020-04-10

標籤使用 webpack 配置 react vue 開發環境超實用欄目 React 简体版

原文原文鏈接

當下前端最火的兩個框架就是了 React 和 Vue 了，Facebook 官方推出的 create-react-app ，Vue 也有本身的 CLI 工具Vue-CLI，兩個工具都已經很是好用，但在實際項目中，咱們仍然須要作一些修改才能夠知足實際項目上線的需求，同時咱們仍但願有更多所謂個性化設置來支持項目。因此掌握 Webpack 中 React 和 Vue 的配置仍是頗有必要的事情。javascript

配置React開發環境

一、React項目基礎配置

建立項目目錄，比較在本地建立一個 myapp 的文件夾，依次執行初始化、安裝React、安裝Webpack和Babel等操做，具體執行命令以下：html

# 新建目錄，而且進入
mkdir react-webpack && cd $_
# 建立 package.json
npm init -y
# 安裝 react react-dom依賴
npm i react react-dom
# 安裝 webpack 和 webpack-cli 開發依賴
npm i webpack webpack-cli -D
# 安裝 babel
npm i babel-loader @babel/core @babel/preset-env -D
# 安裝 babel preset-react
npm i @babel/preset-react -D
複製代碼

還須要添加支持jsx文件的Babel，新建 webpack.config.js 的配置文件，內容以下：前端

module.exports = {
    resolve: {
        extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, // jsx/js文件的正則
                exclude: /node_modules/, // 排除 node_modules 文件夾
                use: {
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 轉義的配置選項
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
        ]
    }
};
複製代碼

在項目的根目錄下建立src目錄，在src下分別建立如下文件：vue

App.js文件：java

// App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
    return (
        <div> <h1>Hello React and Webpack</h1> </div>
    );
};
export default App;
ReactDOM.render(<App />, document.getElementById('app')); 複製代碼

index.js文件：node

// index.jsx
import App from './App'; // 這裏能夠省略.jsx
複製代碼

在 webpack.config.js 中添加 entry：react

module.exports = {
    entry: './src/index.jsx'
    // ...
};
複製代碼

接下來在項目根目錄下建立 public 目錄，用於存放靜態資源文件，新建 index.html 文件，做爲項目的模板，內容以下：webpack

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Hello React Webpack</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
複製代碼

咱們須要使用 html-webpack-plugin 插件來複制 index.html 到 dist 文件夾下，首先是安裝 html-webpack-plugin ：web

cnpm i html-webpack-plugin -D
複製代碼

修改 webpack.config.js：npm

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        new HtmlWebPackPlugin({
            template: 'src/index.html',
            filename: 'index.html'
        })
    ]
};
複製代碼

在 scripts 中配置打包命令：

{
    "scripts": {
        "build": "webpack --mode production"
    }
}
複製代碼

二、React本地服務配置

首先使用webpack-dev-server搭建一個本地開發服務，安裝webpack-dev-server依賴：

npm i webpack-dev-server -D
複製代碼

在package.json增長start的命令：

{
    "scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development --open"
    }
}
複製代碼

爲了方便開發，咱們將新建了一個webpack.config.dev.js的配置文件：

const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.join(__dirname, './src/'),
        publicPath: '/',
        host: '127.0.0.1',
        port: 3000,
        stats: {
            colors: true
        }
    },
    entry: './src/index.jsx',
    // 將 jsx 添加到默認擴展名中，省略 jsx
    resolve: {
        extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, // jsx文件的正則
                exclude: /node_modules/, // 排除 node_modules 文件夾
                use: {
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 轉義的配置選項
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: 'src/index.html',
            filename: 'index.html',
            inject: true
        })
    ]
};
複製代碼

對應的package.json的scripts也修改下，start 添加 config 文件路徑：

{
    "scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server --config './webpack.config.dev.js' --open "
    }
}
複製代碼

到這裏，能夠執行下npm start看下效果了！

配置Vue的開發環境

上面 React 部分已經詳細講解了一些重複的步驟，這裏就簡單說下操做步驟和代碼。

首先也是建立目錄、初始化 package.json、安裝 Vue、安裝 Webpack 和安裝 Babel。

# 新建目錄，而且進入
mkdir vue-webpack && cd $_
# 建立 package.json
npm init -y
# 安裝 vue 依賴
npm i vue
# 安裝 webpack 和 webpack-cli 開發依賴
npm i webpack webpack-cli -D
# 安裝 babel
npm i babel-loader @babel/core @babel/preset-env -D
# 安裝 loader
npm i vue-loader vue-template-compiler -D
# 安裝 html-webpack-plugin
npm i html-webpack-plugin -D
複製代碼

而後在 src 文件夾下新建App.vue和index.js兩個文件，內容以下：

// app.js
import Vue from 'vue';
import App from './app.vue';

Vue.config.productionTip = false;

new Vue({
    render: h => h(App)
}).$mount('#app');
複製代碼

<template>
    <div id="app">
        Hello Vue & Webpack
    </div>
</template>

<script> export default {}; </script>
複製代碼

而後建立一個 HTML 文件index.html：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Webpack Vue Demo</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>
複製代碼

最後配置webpack.config.js，內容以下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
};
複製代碼