基於React+Webpack+Mobx+Less專案搭建指南

時間小魚發表於2018-05-02
ReactWeb

此教程針對 Webpack 為 4.X 版本

Webpack

Webpack 支援零配置，如果 entry 不配置，預設值為 ./src ；如果 output 不寫，預設值為 ./dist。

Webpack 在 4.X 版本廢棄了 CommonsChunkPlugin，需要使用 optimize.splitChunks 來替換。

extract-text-webpack-plugin@4.0.0-beta.0 有很多問題，基於官方推薦，我們使用 mini-css-extract-plugin 來替換。

webpack.config.js 是不能使用 import 命令的，需要把檔名改成 webpack.config.babel.js 才可以。這是一個 webpack 支援的特性，只要你把檔名改成 webpack.config.[loader].js， webpack 就會用相應的 loader 去轉換一遍配置檔案。

Webpack 新增了 mode 配置，有兩個引數，一個為 production，另一個為 development。

API 地址

Babel

Babel 主要是用來把程式碼轉譯為 ES5。使用前需要在 webpack.config.babel.js 配置 babel-loader，其次，在新增 .babelrc 檔案，在該檔案中進行配置一些轉譯規則。

線上轉譯的網址

Mobx

Mobx 是一個簡單、可擴充套件的狀態管理庫。

API 地址

Less

Less 在 CSS 的語法基礎之上，引入了變數，Mixin（混入），運算以及函式等功能，大大簡化了 CSS 的編寫，並且降低了 CSS 的維護成本，就像它的名稱所說的那樣，Less 可以讓我們用更少的程式碼做更多的事情。

API 地址

詳細配置

新建 webpack.config.babel.js 檔案，並作如下配置。

import path from 'path';
// 清除資料夾內檔案外掛
import CleanWebpackPlugin from 'clean-webpack-plugin';
// 生成 HTML 檔案外掛
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
// 開啟瀏覽器外掛
import OpenBrowserPlugin from 'open-browser-webpack-plugin';
import alias from './webpack.alias.js';

const port = 9676;

module.exports = {
    // 入口檔案
    entry: './src/index.js',
    // 輸出
    output: {
        // 輸出檔名
        filename: 'bundle.js',
        // 輸出路徑
        path: path.resolve(__dirname, 'dist')
    },
    // loader
    module: {
        rules: [{
            test: /\.js[x]?$/,
            loader: 'babel-loader',
            // node_modules 不使用 babel-loader
            exclude: /node_modules/
        }, {
            test: /\.less$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
        }, {
            test: /\.css/,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
        }]
    },
    resolve: {
        alias: alias,
        extensions: ['.js', '.jsx']
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Blog',
            template: path.join(__dirname, 'template.ejs')
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            allChunks: true
        }),
        new CleanWebpackPlugin('./dist/*.*'),
        new OpenBrowserPlugin({url: `http://localhost:${port}`})
    ],
    devServer: {
        // 埠號
        port: port,
        host: '0.0.0.0',
        compress: true,
        proxy: {
            '/api/*': {
                target: 'http://localhost:8987'
            }
        }
    }
};
複製程式碼

相關文章