Сегодня я вошел в состав Webpack, и мне удалось использовать множество полезных функций (через загрузчиков Webpack), таких как CSS
модули и транспилятор Babel. Я хочу использовать это, чтобы создать приложение React (без create-react-app
).
Вот мой файл конфигурации:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /.js|jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.html$/,
exclude: /node_modules/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "index.html"
})
]
};
Поскольку у меня теперь есть единственная точка входа, весь мой пакет преобразуется в один JS
файл. Однако, по мере того, как растет мое приложение для реагирования, вероятно, лучше разбить пакет на несколько кусков, чтобы их можно было загрузить быстрее (это правильная терминология?).
javascript,reactjs,webpack,webpack-4,
Сегодня я вошел в состав Webpack, и мне удалось использовать множество полезных функций (через загрузчиков Webpack), таких как CSS
модули и транспилятор Babel. Я хочу использовать это, чтобы создать приложение React (без create-react-app
).
Вот мой файл конфигурации:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /.js|jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.html$/,
exclude: /node_modules/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "index.html"
})
]
};
Поскольку у меня теперь есть единственная точка входа, весь мой пакет преобразуется в один JS
файл. Однако, по мере того, как растет мое приложение для реагирования, вероятно, лучше разбить пакет на несколько кусков, чтобы их можно было загрузить быстрее (это правильная терминология?).