Dieser Artikel stellt Ihnen die Implementierungsmethode zum Erstellen mehrseitiger Anwendungen mit webpack4 vor. Ich hoffe, dass er für Sie hilfreich ist.
Nachdem ich Webpack auf 4 aktualisiert habe, habe ich immer noch kein praktisches Webpack-Framework synchronisiert. Als nächstes werde ich Webpack4 verwenden, um ohne weiteres eine einfache React-Multi-Interface-Anwendung zu erstellen.
$ mkdir demo && cd demo $ npm init -y
![工程目录结构][1]
安装react + babel 依赖 $ npm i -S react@16.3.0 react-dom@16.3.0 $ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1 babel-preset-react-hmre@1.1.1 babel-loader@7.1.4 file-loader@1.1.11 url-loader@1.0.1
const entry = require("./webpack.entry.conf");
const newEntry = {};
for (let name in entry) {
newEntry[name] = entry[name][0]
}
let config = {
entry: newEntry,
resolve: {
extensions: [".js", ".json", ".jsx", ".css", ".pcss"],
}
};
module.exports = config;const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./webpack.base.conf");//基础配置
const webpackFile = require("./webpack.file.conf");//一些路径配置
const eslintFormatter = require('react-dev-utils/eslintFormatter');
let config = merge(baseWebpackConfig, {
/*设置开发环境*/
mode: 'development',
output: {
path: path.resolve(webpackFile.devDirectory),
filename: 'js/[name].js',
chunkFilename: "js/[name].js",
publicPath: ''
},
optimization: {
runtimeChunk: {
name: 'manifest'
},
// 包拆分
splitChunks: {
cacheGroups: {
common: { // 项目的公共组件
chunks: "initial",
name: "common",
minChunks: 2,
maxInitialRequests: 5,
minSize: 0
},
vendor: { // 第三方组件
test: /node_modules/,
chunks: "initial",
name: "vendor",
priority: 10,
enforce: true
}
}
}
},
plugins: [
/*设置热更新*/
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
'babel-loader',
'cache-loader',
],
include: [
path.resolve(__dirname, "../../app"),
path.resolve(__dirname, "../../entryBuild")
],
exclude: [
path.resolve(__dirname, "../../node_modules")
],
},
{
test: /\.(css|pcss)$/,
loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
loader: 'file-loader?name=[name].[ext]&outputPath=' + webpackFile.resource + '/'
},
{
test: /\.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
// @remove-on-eject-begin
baseConfig: {
extends: [require.resolve('eslint-config-react-app')],
},
//ignore: false,
useEslintrc: false,
// @remove-on-eject-end
},
loader: require.resolve('eslint-loader'),
},
],
include: [
path.resolve(__dirname, "../../app")
],
exclude: [
path.resolve(__dirname, "../../node_modules")
],
}
]
},
/*设置api转发*/
devServer: {
host: '0.0.0.0',
port: 8080,
hot: true,
inline: true,
contentBase: path.resolve(webpackFile.devDirectory),
historyApiFallback: true,
disableHostCheck: true,
proxy: [
{
context: ['/api/**', '/u/**'],
target: 'http://10.8.200.69:8080/',
secure: false
}
],
/*打开浏览器 并打开本项目网址*/
after() {
opn('http://localhost:' + this.port);
}
}
});
module.exports = config;const path = require('path');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const baseWebpackConfig = require("./webpack.base.conf");
const webpackFile = require('./webpack.file.conf');
const entry = require("./webpack.entry.conf");
const webpackCom = require("./webpack.com.conf");
let config = merge(baseWebpackConfig, {
/*设置生产环境*/
mode: 'production',
output: {
path: path.resolve(webpackFile.proDirectory),
filename: 'js/[name].[chunkhash:8].js',
chunkFilename: "js/[name]-[id].[chunkhash:8].js",
},
optimization: {
//包清单
runtimeChunk: {
name: "manifest"
},
//拆分公共包
splitChunks: {
cacheGroups: {
common: { //项目公共组件
chunks: "initial",
name: "common",
minChunks: 2,
maxInitialRequests: 5,
minSize: 0
},
vendor: { //第三方组件
test: /node_modules/,
chunks: "initial",
name: "vendor",
priority: 10,
enforce: true
}
}
}
},
plugins: [
// extract css into its own file
new ExtractTextPlugin('css/[name].[md5:contenthash:hex:8].css'),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {removeAll: true},
// 避免 cssnano 重新计算 z-index
safe: true
},
canPrint: true
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
'babel-loader',
],
},
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(css|pcss)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!postcss-loader"
})
},
{
test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
loader: 'url-loader?limit=8192&name=[name].[hash:8].[ext]&publicPath=' + webpackFile.resourcePrefix + '&outputPath=' + webpackFile.resource + '/'
},
{
test: /\.swf$/,
loader: 'file?name=js/[name].[ext]'
}
]
}
});
let pages = entry;
for (let chunkName in pages) {
let conf = {
filename: chunkName + '.html',
template: 'index.html',
inject: true,
title: webpackCom.titleFun(chunkName,pages[chunkName][1]),
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunks: ['manifest', 'vendor', 'common', chunkName],
hash: false,
chunksSortMode: 'dependency'
};
config.plugins.push(new HtmlWebpackPlugin(conf));
}
/* 清除 dist */
config.plugins.push(new CleanWebpackPlugin([webpackFile.proDirectory], {root: path.resolve(__dirname, '../../'), verbose: true, dry: false}));
/* 拷贝静态资源 */
copyArr.map(function (data) {
return config.plugins.push(data)
});
module.exports = config;整体架构搭建起来之后
app -> component
$ mkdir demo && cd demo
$ touch Index.jsx
import React from 'react';
class Index extends React.Component {
render() {
return (
<p className="demo">
写个demo
</p>
);
}
}
export default Index;In config -> Eintrag
module.exports = [
{
name: 'index',
path: 'index/Index.jsx',
title: '首页',
keywords: '首页',
description: '首页'
},
{
name: 'demo',
path: 'demo/Index.jsx',
title: 'demo',
keywords: 'demo',
description: 'demo'
},
{
name: 'demo1',
path: 'demo1/Index.jsx',
title: 'demo1',
keywords: 'demo1',
description: 'demo1'
}
];Führen Sie dann direkt npm run create-dev aus und eine neue demo.html und demo.js werden zu devBuild und enterBuild hinzugefügt
package.json
{
"name": "webpack_es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors --profile --config config/webpack/webpack.dev.conf.js",
"entry": "node config/entry/entryBuild.js",
"devBuildHtml": "node config/webpack/webpack.devBuildHtml.conf.js",
"create-dev": "npm run entry && npm run devBuildHtml",
"build": "BABEL_ENV=production && webpack --progress --colors --config config/webpack/webpack.prod.conf.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"cache-loader": "^1.2.2",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"eslint": "^4.19.1",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-flowtype": "^2.46.1",
"eslint-plugin-import": "^2.10.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file": "^0.2.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.1.0",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"postcss-cssnext": "^3.1.0",
"postcss-loader": "^2.1.3",
"precss": "^3.1.2",
"react-dev-utils": "^5.0.0",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1",
"webpack-merge": "^4.1.2"
},
"eslintConfig": {
"extends": "react-app",
"rules": {
"import/no-webpack-loader-syntax": 0,
"no-script-url": 0,
"jsx-a11y/href-no-hash": 2
}
}
}Das Hinzufügen eines Cache-Loaders in der Entwicklungsumgebung kann die Kompilierungsgeschwindigkeit in der Entwicklungsumgebung verbessern
Empfohlene verwandte Artikel:
So implementieren Sie CSS und weniger im React Antd -mobile Projektbereichsfunktion
Code zum Hochladen von Ajax-Dateien mit FormData()
Das obige ist der detaillierte Inhalt vonSo erstellen Sie mehrseitige Anwendungen mit webpack4 und reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
