webpack собирает проект React вручную

React.js

webpack собирает проект React вручную

Инициализировать проект

Создайте новый каталог и инициализируйте проект

npm init

Добавьте следующие зависимости в package.json

// dependencies是指在使用npm i -save [modules] 的时候安装的，执行 npm install --production 的时候会安装
"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1"
  },
// devDependencies是指在使用npm i -save-dev [modules] 的时候安装的，执行 npm install --production 的时候不会安装
"devDependencies": {
// 安装babel相关的
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
// 插件：每次build的时候清空旧文件
"clean-webpack-plugin": "^3.0.0",
// css处理
"css-loader": "^2.1.1",
// 处理CSS兼容
"postcss-loader": "^3.0.0",
"autoprefixer": "^9.6.0",
// 添加less支持
"less": "^3.9.0",
"less-loader": "^5.0.0",
// 插件
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
// 添加webpack打包
"webpack": "^4.33.0",
"webpack-cli": "^3.3.3",
// 提供web容器，可在本地访问http://localhost:port
"webpack-dev-server": "^3.7.1",
// 提供配置文件的合并
"webpack-merge": "^4.2.1"
}

Установите вышеуказанные зависимости

npm install

настроить бабел

Создайте новый файл .babelrc в корневом каталоге

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

Добавьте postcss.config.js в корневой каталог.

module.exports = {  
    plugins: {  
      'autoprefixer': {browsers: 'last 5 version'}  
    }  
  }

Создайте новый файл webpack.base.config.js в корневом каталоге в качестве базовой конфигурации веб-пакета.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
	// 入口文件
    entry: './src/index.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.join(__dirname, '/dist')
    },
    module: {
    	// 配置相应的规则
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }, {
                test: /\.js[x]?$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }, {
                test: /\.less$/,
                use: ['style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'less-loader'],
            }
        ]
    },
    // 配置相应的插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin()
    ]
};

Создайте новый файл webpack.dev.config.js в корневом каталоге в качестве конфигурации среды разработки.

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

module.exports = merge(baseConfig, {
	// 设置为开发模式
    mode: 'development',
    devtool: 'inline-source-map',
    // 配置服务端目录和端口
    devServer: {
        contentBase: './dist',
        port: 3000
    }
});

Создайте новый файл webpack.product.config.js в корневом каталоге в качестве конфигурации рабочей среды.

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');

module.exports = merge(baseConfig, {
	// 设置为生产模式
    mode: 'production'
});

настроить команду скрипта

  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.config.js",
    "build": "webpack --config webpack.product.config.js"
  },

Создайте новый каталог src в корневом каталоге и index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
</body>
</html>

Создайте новые файлы ввода index.js и App.js в src

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.less';

ReactDOM.render(<App/>, document.getElementById('root'));


import React from 'react';

class App extends React.Component {
    render() {
        return <div>
            <h1 className="hello">Hello React & Webpack!</h1>
        </div>
    }
}

export default App;

Создайте новый файл index.less в каталоге src, чтобы протестировать файл less.

@blog-color-red: #ff0000;

.hello {
    color: @blog-color-red;
}

запустить программу

npm run start

Если ничего другого, он перейдет к интерфейсу браузера после выполнения и отобразит слова **Hello React & Webpack!** красным цветом.

пакетный файл

npm run build

Если ничего другого, в корневом каталоге будет создан файл dist, который можно открывать между папками, отображая слова **Hello React & Webpack!** красным цветом.

Эпилог

В прошлом обычно использовался инструмент создания лесов, поставляемый с фреймворком. Когда было время на фестивале лодок-драконов, я взял на себя инициативу настроить веб-пакет и реагировать. Конечно, выше приведены лишь некоторые простые конфигурации. Более сложные конфигурации все еще нужно изменить конфигурацию веб-пакета, и я добавлю ее, когда у меня будет время. следующийНастроить веб-пакет и vue.

Адрес проекта на GitHub:GitHub.com/card view n-side/tower…

(над)

Категории