共计 1492 个字符,预计需要花费 4 分钟才能阅读完成。
Webpack 多入口配置
不须要应用路由,而是通过多入口独立实现
1. React 目录
index.html:模板 HTML;如果每个入口的模板 HTML 不统一,能够建设一个文件夹寄存。
App.less:公共款式,如果没有,可省略
global.d.ts:寄存一些全局的公共定义
pages:下为多个文件夹,每个文件夹就是一个模块,内蕴含 index.ts 及对应的 css 文件
2. Webpack 配置
- 获取到每个模块的 index.tsx 并拼装成 entry 须要的格局
-
应用
html-webpack-plugin
,进行 HTML 模板的创立,因为有多少个 entry,就须要进行多少次new HtmlWebpackPlugin()
,所以在生成 entry 处同步进行 htmlPlugins 的解决,在配置中进行应用const getEntries = () => { // 每个模块的入口文件都是 index.tsx const files = glob.sync('./app/pages/**/index.tsx'); files.forEach(element => {const file = element.split('/') const name = file[file.length - 2] entries[name] = element htmlPlugins.push(new HtmlWebpackPlugin({ title: 'Custom template', template: './app/index.html', filename: `${name}/index.html`, chunks: [name] })) }) }
entry: entries, plugins: [...htmlPlugins]
-
js 文件
依照模块进行 js 文件的分类,并设置生成门路output: {filename: '[name]/[name].js', path: path.resolve(__dirname, 'out', 'app',), chunkFilename: '[name].bundle.js', },
默认会生成 license.txt 文件,正文则增加以下代码
optimization: { minimizer: [ new TerserPlugin({extractComments: false}) ], }
-
css 文件
对 less 和 css 文件的解析,留神程序
如果不须要独自生成 css 文件,能够不应用MiniCssExtractPlugin
,MiniCssExtractPlugin.loader
替换为style-loader
对 less 文件的解决,只应用 less-loader 会报错,所以增加了options
的配置module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', { loader: 'less-loader', options: { lessOptions: {javascriptEnabled: true,}, }, }], }, ], },
plugins: [ new MiniCssExtractPlugin({filename: ({ chunk}) => {console.log(chunk, 'chunk') return `${chunk.name === 'common' ? 'common' : chunk.name}/${chunk.name.replace('/js/', '/css/')}.css` } }), ]
正文完