const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); /*const HtmlWebpackInlineSourcePlugin=require('html-webpack-inline-source-plugin');*/ const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清空打包目录的插件 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const webpack = require('webpack'); const glob = require('glob'); // const proxyHost = "http://192.168.2.236:5858"; // const proxyHost = "http://192.168.3.184:5859"; const proxyHost = "http://172.16.8.64:5858"; //正式 // const proxyHost = "http://www.diagbot.net:5858/"; //测试 // const proxyHost = "http://192.168.4.222:5858"; // const proxyHost = "http://192.168.3.117:5858";//铁钢 // const proxyHost = "http://192.168.3.113:5858";//王峰 let entries = { vendor: 'lodash' }, plugines = []; function getentries() { let entryFiles = glob.sync('./src/js/**/*.js') let htmls = glob.sync('./src/html/**/*.html'); for (var i = 0; i < entryFiles.length; i++) { var filePath = entryFiles[i]; var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')); entries[filename] = filePath; } for (var i = 0; i < htmls.length; i++) { var filePath = htmls[i]; var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')); let conf = { filename: filename + '.html', template: filePath, // html模板路径 inject: true, chunks: [filename, 'vendor', 'common', 'scrollBar'], hash: true, //防止缓存 minify: { removeAttributeQuotes: true, //压缩 去掉引号 removeComments: true, //移除HTML中的注释 collapseWhitespace: true //删除空白符与换行符 } }; plugines.push(new HtmlWebpackPlugin(conf)); } } getentries(); module.exports = { entry: entries, output: { publicPath: '/', //这里要放的是静态资源CDN的地址 path: path.resolve(__dirname, 'dist'), filename: 'js/[name].js' }, resolve: { extensions: [".js", ".css", ".json"], alias: { '@': path.resolve('./src'), '@src': path.resolve('./src'), '@less': path.resolve('./src/css'), '@images': path.resolve('./src/images'), '@js': path.resolve('./src/js'), } //配置别名可以加快webpack查找模块的速度 }, plugins: [ //多入口的html文件用chunks这个参数来区分 ...plugines, new CopyWebpackPlugin([{ from: 'src/resource', to: path.resolve(__dirname, 'dist', 'resource'), flatten: true, //false会拷贝原始文件夹路径 }]), new MiniCssExtractPlugin({ filename: 'css/[name].css', chunkFilename: '[id].css' }), new webpack.HotModuleReplacementPlugin(), new CleanWebpackPlugin() ], optimization: { //webpack4.x的最新优化配置项,用于提取公共代码 minimizer: [ new UglifyJsPlugin({ uglifyOptions: { ie8: true, compress: { properties: false, warnings: false }, mangle: { screw_ie8: false, except: ['e'] }, output: { beautify: true }, sourceMap: false } }) ], splitChunks: { cacheGroups: { commons: { chunks: "initial", name: "common", minChunks: 2, maxInitialRequests: 5, // The default limit is too small to showcase the effect minSize: 0, // This is example is too small to create commons chunks reuseExistingChunk: true // 可设置是否重用该chunk } } } }, module: { noParse: /WdatePicker/, rules: [{ test: /.js$/, enforce: 'post', loader: 'es3ify-loader' }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.css$/, use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader' ] }, { test: /\.less$/, use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'less-loader' ] }, { test: /\.(png|gif|jpg|jpeg|svg|eot|ttf|woff|woff2)$/, use: [{ loader: 'url-loader', options: { limit: 10240, esModule: false, name: '[name]_[hash:6].[ext]', outputPath: 'images/' } }], exclude: /node_modules/ }, { test: /.html$/, use: 'html-withimg-loader' } ] }, // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map mode: 'development', devServer: { contentBase: "./dist", //静态文件根目录 proxy: { '/': proxyHost }, hot: true, openPage: 'login.html' } }