webpack 多页面构建

it2024-10-01  19

目标:

基于webpack支持react多页面构建(不用gulp,gulp-webpack 构建速度太慢[3]), generator-react-webpack 对单页面支持很好,但对多页面,需要改造提高开发人员的效率并能对项目进行足够的性能优化提高构建的效率

配置文件编写(webpack.config.js)

示例:

var path = require('path'); var glob = require('glob'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var node_dir = path.join(__dirname, './node_modules/'); var HtmlWebpackPlugin = require('html-webpack-plugin'); // 获取所有入口文件 var getEntry = function(globPath) { var entries = { vendor: ['jquery','react','react-dom','./src/app'] // 类库 }; glob.sync(globPath).forEach(function(entry) { var pathname = entry.split('/').splice(-2).join('/').split('.')[0]; entries[pathname] = [entry]; }); console.log(entries); return entries; }; // 判断是否是在当前生产环境 var isProduction = process.env.NODE_ENV === 'production'; var entries = getEntry('./src/view/*/*.jsx'); var chunks = Object.keys(entries); module.exports = { entry: entries, output: { path: path.join(__dirname, './dist'), filename: isProduction ?'js/[name].[hash:8].js':'js/[name].js', publicPath: '/dist/', chunkFilename: 'chunk/[name].chunk.js' }, module: { noParse:[ /*path.join(node_dir,'./react/dist/react.min.js'), path.join(node_dir,'./jquery/dist/jquery.min.js'), path.join(node_dir,'./react-dom/dist/react-dom.min.js')*/ ], loaders: [{ test: /\.jsx?$/, loader: 'babel', query: { presets: ['es2015', 'react'] }, exclude: node_dir }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css') }, { test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css!less') }, { test: /\.(png|jpe?g|gif)$/, loader: 'url?limit=8192&name=img/[hash:8].[ext]' }, { //文件加载器,处理文件静态资源 test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file?limit=10000&name=fonts/[hash:8].[ext]' }] }, resolve: { extensions: ['', '.js

转载于:https://www.cnblogs.com/ddlove/p/6294395.html

相关资源:webpack静态多页面构建工具
最新回复(0)