Создание приложения React с нуля (1) — базовая конструкция

Командная строка JavaScript React.js Webpack

Ссылка на проект:GitHub.com/г-н Чжан123/…

основной

  • React:16.3.2
  • React-dom:16.3.2
  • Webpack:4.6.0
  • React-router-dom:4.2.2
  • Redux:4.0.0
  • React-hot-loader:4.1.2

Структура каталогов

├── README.md
├── build
│   ├── webpack.base.config.js
│   ├── webpack.dev.config.js
│   └── webpack.production.config.js
├── package.json
├── postcss.config.js
├── src
│   ├── App.js
│   ├── components
│   │   └── Loading
│   │       └── index.js
│   ├── index.html
│   ├── main.js
│   ├── redux
│   │   ├── actions
│   │   │   └── demo.js
│   │   ├── middleware
│   │   │   └── index.js
│   │   ├── reducers
│   │   │   ├── demo.js
│   │   │   └── index.js
│   │   └── store
│   │       └── index.js
│   ├── static
│   │   └── css
│   │       └── normalize.css
│   ├── styles.scss
│   └── views
│       ├── Content
│       │   ├── About
│       │   │   └── index.js
│       │   ├── Home
│       │   │   └── index.js
│       │   ├── Topics
│       │   │   └── index.js
│       │   └── router.js
│       └── RouterLink
│           └── index.js
└── yarn.lock

Базовая конструкция

Сначала создайте базовую среду разработки React без избыточности и реактивного маршрутизатора.

Установите необходимые пакеты

# dependencies
yarn add react react-dom

# devDependencies
yarn add --dev webpack webpack-cli webpack-dev-server babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react babel-preset-stage-0 cross-env css-loader file-loader jsx-loader style-loader url-loader

иллюстрировать

  1. CLI (интерфейс командной строки) webpack4 был перенесен в webpack-cli. Если вы хотите использовать CLI, вам необходимо установить webpack-cli. Подробнее см.Документация для webpack-cli.
  2. Поскольку Babel по умолчанию преобразует только новый синтаксис (синтаксис) JavaScript, он не преобразует новые API, такие как глобальные объекты, такие как Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise и некоторые методы, определенные для глобальных объектов ( Например, Object.assign), поэтому, если вы хотите использовать эти методы, вы должны использовать babel-polyfill, чтобы обеспечить прокладку для текущей среды.

настроить веб-пакет

Создайте три новых файла в папке сборки - WebPack.base.config.js, webpack.dev.config.js, webpack.production.config.js, и поставить общие части dev и peptionon в базовый файл.

// webpack.base.config.js
const path = require('path')

module.exports = {
  entry: {
    main: [
      'babel-polyfill',
      path.resolve(__dirname, '../src/main.js')
    ]
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: 'chunk/[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.web.js', '.js', '.jsx', '.json']
  },
  mode: '' // webpack v4 add
}

Поскольку это общедоступный файл конфигурации веб-пакета, настройка режима здесь пуста, а затем устанавливается отдельно в dev и prodctuon.

режим webpack4

Добавлены некоторые конфигурации по умолчанию в webpack v4, установивmodeдаdevelopmentа такжеproduction(по умолчанию), чтобы включить конфигурацию по умолчанию в разработке и производстве.

1. Конфигурация с обоими

//parent chunk中解决了的chunk会被删除
optimization.removeAvailableModules:true
//删除空的chunks
optimization.removeEmptyChunks:true
//合并重复的chunk
optimization.mergeDuplicateChunks:true

2. Конфигурация разработки по умолчанию

//调试
devtool:eval
//缓存模块, 避免在未更改时重建它们。
cache:true
//缓存已解决的依赖项, 避免重新解析它们。
module.unsafeCache:true
//在 bundle 中引入「所包含模块信息」的相关注释
output.pathinfo:true
//在可能的情况下确定每个模块的导出,被用于其他优化或代码生成。
optimization.providedExports:true
//找到chunk中共享的模块,取出来生成单独的chunk
optimization.splitChunks:true
//为 webpack 运行时代码创建单独的chunk
optimization.runtimeChunk:true
//编译错误时不写入到输出
optimization.noEmitOnErrors:true
//给模块有意义的名称代替ids
optimization.namedModules:true
//给模chunk有意义的名称代替ids
optimization.namedChunks:true

3. Настройки по умолчанию для производства

//性能相关配置
performance:{hints:"error"....}
//某些chunk的子chunk以一种方式被确定和标记,这些子chunks在加载更大的块时不必加载
optimization.flagIncludedChunks:true
//给经常使用的ids更短的值
optimization.occurrenceOrder:true
//确定每个模块下被使用的导出
optimization.usedExports:true
//识别package.json or rules sideEffects 标志
optimization.sideEffects:true
//尝试查找模块图中可以安全连接到单个模块中的段。- -
optimization.concatenateModules:true
//使用uglify-js压缩代码
optimization.minimize:true

настроить webpack.dev.config.js

const webpack = require('webpack')
const config = require('./webpack.base.config.js')
const WebpackDevServer = require('webpack-dev-server')
const PORT = process.env.PORT || 8000 // 默认8000端口，可以通过package.json配置

config.entry.main = (config.entry.main || []).concat([
  `webpack-dev-server/client?http://localhost:${PORT}/`,
  'webpack/hot/dev-server'
])

config.plugins = (config.plugins || []).concat([
  new webpack.HotModuleReplacementPlugin()
])

config.mode = 'development'

const compiler = webpack(config)

const server = new WebpackDevServer(compiler, {
  hot: true, // 开启wbepack HMR
  quiet: true,
  historyApiFallback: true,
  filename: config.output.filename,
  publicPath: config.output.publicPath,
  stats: {
    colors: true
  }
})

server.listen(PORT, 'localhost', () => {
  console.log(`server started at localhost:${PORT}`)
})

оoutput.publicPathа такжеdevServer.publicPathРазница может относиться к моей статье:Подробное объяснение publicPath в Webpack

настроить webpack.production.config.js

const path = require('path')
const webpack = require('webpack')
const config = require('./webpack.base.config')
const CleanWebpackPlugin = require('clean-webpack-plugin')

config.mode = 'production'

config.plugins = (config.plugins || []).concat([
	new CleanWebpackPlugin(['dist'], {
    root: path.resolve(__dirname, '../')
  }),
  new webpack.HashedModuleIdsPlugin()
])

module.exports = config

Эпилог

До сих пор была построена простая среда разработки React, но после использования будут обнаружены некоторые проблемы.Например, webpack упаковывает js и css вместе.Когда мы используем HMR webpack, пока мы сохраняем, страница будет обновляться, а статус страницы будет обновлен.Будут сброшены и другие проблемы и присоединятся к часто используемому редуксу и реактивному маршрутизатору, следующая статья——Создание приложения React с нуля (2) — Схема приложения ReactЭти вопросы будут решаться.

Категории