webpack 升级到4之后还没好好的同步一个可实用的webpack架子，接下来用webpack4来搭建一个简单的react的多界面应用，废话不说 直接撸码
创建工程
$ mkdir demo && cd demo $ npm init -y
webpack 配置
安装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
webpack.base.conf.js(config -> webpack)
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;
webpack.dev.conf.js
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 + 'https://www.jb51.net/' }, { 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;
webpack.prod.conf.js
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 + 'https://www.jb51.net/' }, { 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